您的位置: 首页  >  文章  >  Javascript:ajax

Javascript:ajax

分类: 文章 • 2022-10-01 22:50:58

XMLHttpRequest

Ajax技术能向服务器请求额外的数据而无需加载页面。而这一技术的核心便是XMLHttpRequest对象(简称XHR)。

XMLHttpRequest方法

// 创建xhr对象
var xhr = new XMLHttpRequest();

xhr.open(method,url,async)

接收3个参数:要发送的请求的类型，请求的URL，表示是否异步发送请求的布尔值。

  1. URL相对于当前页面(也可以使用绝对路径)

  2. 调用open()方法不会真正发送请求，而只是启动一个请求以备发送

// 初始化请求
xhr.open('get',example.php,true)

Note:只能向同一个域(子域名和主域名都得相同)使用相同端口号和协议的URL发送请求。如果URL与启动请求的页面有任何差别，都会引发安全错误。

// 一个域名的组成

协议    子域名  主域名     端口号  
http:// www.   abc.com : 8080

同源策略

请求类型

GET请求

用于向服务器查询某些信息。

可以将查询字符串参数追加到URL末尾，以便将信息发送给服务器。对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。

Note:查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才放到URL的末尾;而且所有名-值对都必须由和好(&)分隔。

function addURLParam ( url, name, value ) {

    url += url.indexOf('?') === -1 ? '?' : '&';
    url += encodeURIComponent(name) + '=' + encodeURIComponent(value); 

    return url;
}
POST请求

用于向服务器发送应该被保存的信息。

POST请求应该把数据作为请求的主体提交。

PUT请求

向服务器发送想要更新的信息来替换服务上旧的信息

DELETE请求

删除服务上的信息。

Note:服务器并不会强迫执行它获得的每一个请求。如果你随意的浏览一个网站，并要求删除它的主要页面，很可能会失败

xhr.send(string)

接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null

xhr.abort()

取消异步请求。

  1. 调用这个方法后，xhr对象会停止触发事件

  2. 不允许xhr对象访问任何与响应有关的对象属性

xhr.setRequestHeader()

设置自定义的头部信息。

接收两个参数:1.头部字段的名称和头部字段的值。
必须在调用send()方法之前且open()方法之后，调用此方法。

xhr.open('get', 'example.php', true);
xhr.serRequestHeader('MyHeader', 'MyValue');
xhr.send(null);

xhr.getResponseHeader()

传入头部字段名称，可以取得相应的头部信息,查询响应中某个字段的值

xhr.getAllResponsHeaders()

可以取得所有头部信息的长字符串

XMLHttpRequest属性

Javascript:ajax

/* 发送同步请求 */

// 创建xhr对象
var xhr = new XMLHttpRequest();

// 初始化请求
xhr.open('get',example.php,false);

// 发送请求
xhr.send(null);

在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下

与响应有关的xhr属性

  • status: 响应的HTTP状态码

  • statusText: HTTP状态的说明 // 跨浏览器使用不可靠

  • responseText: 作为响应主体被返回的文本,获得字符串形式的响应数据

  • responseXML: 如果响应的内容为'text/xml'或'application/xml',这个属性中将保存包含着响应数据的XML DOM文档

HTTP状态码

  • 1XX 提示信息 - 表示请求已被成功接收，继续处理

  • 2XX 成功 - 表示请求已被成功接收，理解，接受

  • 3XX 重定向 - 要完成请求必须进行更进一步的处理

  • 4XX 客户端错误 - 请求有语法错误或请求无法实现

  • 5XX 服务器端错误 - 服务器未能实现合法的请求

/* 发送异步请求 */

// 创建xhr对象
var xhr = new XMLHttpRequest();

// 监听请求状态
xhr.onreadystatechange = function () {
    if(xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status = 304) {
            alert(xhr.responseText);
        } else {
            alert('Request was unsuccessful: ' + xhr.status);
        }
    }
}
 
// 初始化请求
xhr.open('get',example.php,true);

// 发送请求
xhr.send(null);

表示请求响应过程的xhr属性

  • readyState:

    1. 0。未初始化。尚未调用open()方法

    2. 1。服务器建立连接。已经调用open()方法，但未调用send()方法

    3. 2。请求已接收。调用send()方法，但未接收到响应

    4. 3。请求处理中。接收到部分数据响应

    5. 4。请求完成。接收到全部响应数据，可以在客户端使用了。

HTTP响应与请求体

http—无状态协议

请求过程
1.建立TCP连接
2.Web浏览器向服务器发送请求命令
3.Web浏览器发送请求头信息
4.Web服务器应答
5.Web服务器发送应答头信息
6.Web服务器向浏览器发送数据
7.Web服务器关闭TCP连接

HTTP请求包(浏览器信息)

Request包的结构, Request包分为3部分

第一部分叫Request line（请求行)
第二部分叫Request header（请求头）
第三部分是body（主体）。header和body之间有个空行，请求包的例子所示:

GET /domains/example/ HTTP/1.1 //请求行: 请求方法 请求URI HTTP协议/协议版本 

Host：www.iana.org //服务端的主机名 
User-Agent：Mozilla/5.0 (Windows NT 6.1)
AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4 // 浏览器信息 
Accept：text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 //客户端能接收的mine 
Accept-Encoding：gzip,deflate,sdch //是否支持流压缩
Accept-Charset：UTF-8,*;q=0.5 //客户端字符编码集 

//空行,用于分割请求头和消息体 

//消息体,请求资源参数,例如POST传递的参数

HTTP响应包(服务器信息)

和请求包一样分为3个部分。


HTTP/1.1 200 OK                            // 状态行

Server: nginx/1.0.8                       // 服务器使用的WEB软件名及版本
Date:Date: Tue, 30 Oct 2012 04:14:25 GMT // 发送时间
Content-Type: text/html                 // 服务器发送信息的类型
Transfer-Encoding: chunked             // 表示发送HTTP包是分段发的
Connection: keep-alive                // 保持连接状态
Content-Length: 90                   // 主体内容长度

//空行 用来分割消息头和主体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"... //消息体

FormDate

为序列化表单以及创建于表单格式相同的数据提供了便利。

var data = new FormData();
data.append('name','Nicholas');

跨资源共享

CORS(Cross-Origin Resource Sharing, 跨资源共享):定义了在必须访问跨源资源时，浏览器与服务器如何沟通。

基本思想:使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。

IE对CORS的实现

  • cookie不会随请求发送，也不会随响应返回

  • 只能设置请求头部信息中的Conte-type字段

  • 不能访问响应头部信息

  • 只支持GET和POST请求

其他浏览器对CORS的实现

  • 不能使用setRequestHeader()设置自定义头部

  • 不能发送和接收cookie

  • 调用getAllResponseHeaders()方法总会返回空字符串

Comet

一种服务器向页面推送数据的技术。

实现方式:

  1. 长轮询

  2. HTTP流

长轮询

首先轮询的意思就是,浏览器定时向服务器发送请求,看有没有更新的数据。

短轮询(也就是传统轮询)：浏览器定时向服务器发送请求，与服务器建立
长轮询:

HTTP流

在页面的整个周期内，只使用一个HTTP连接。

具体来说，就是浏览器向服务器发送一个请求，而服务器保持连接打开

相关推荐