js学习笔记：Ajax

最新推荐文章于 2023-05-13 18:44:33 发布

gigi就是我

最新推荐文章于 2023-05-13 18:44:33 发布

阅读量754

点赞数 2

分类专栏： javascript 文章标签： ajax javascript xmlhttprequest

本文链接：https://blog.csdn.net/crystal6918/article/details/53310626

版权

javascript 专栏收录该内容

100 篇文章 0 订阅

订阅专栏

Ajax，（Asynchronous JavaScript + XML），能够向服务器请求额外的数据而无需卸载页面。
Ajax技术的核心是XMLHttpRequest对象（简称XHR）。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息，意味着用户单击后可以不必刷新页面也能取得新数据。

XMLHttpRequest对象

大多数现代浏览器都支持原生的XHR对象，在这些浏览器中创建XHR对象要像下面这样使用XMLHttpRequest构造函数：

var xhr = new XMLHttpRequest();

XHR的用法

open（）

在使用XHR对象时，要调用的第一个方法是open（），它接收三个参数：

要发送的请求类型，“get”、“post”等
请求的URL
表示是否异步发送请求的布尔值

xhr.open("get","example.php",false);

这行代码会启动一个针对example.php的GET请求。
要注意，调用open（）方法并不会真正发送请求，而只是启动一个请求以备发送。

send（）

要发送特定的请求，必须调用send方法：

xhr.send(null);

send（）方法接收一个参数，即要作为请求主体发送的数据。
如果不需要通过请求主体发送数据，必须传入null，因为这个参数对有些浏览器来说是必需的。
调用send之后，请求就会被分派到服务器。

由于这次请求是同步的，JavaScript代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性：

responseText：作为响应主体被返回的文本
responseXML：如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存包含着响应数据的XML DOM文档。
status：响应的HTTP状态
statusText：HTTP状态的说明

在收到响应后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态代码200作为成功的标志。此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也应该能够访问了。
此外，状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本。这也意味着响应是有效的。

为确保接收到适当的响应，应该像下面这样检查上述这两种状态代码：

xhr.open("get","example.php",false);
xhr.send(null);

if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
}else{
    alert("request is unsuccessful:"+xhr.status);
}

我们都应该通过检测status来决定下一步的操作。
不要依赖statusText，因为后者在跨浏览器时不太可靠。
另外，无论内容类型是什么，响应主体的内容都会保存到responseText中。而对于非XML数据而言，responseXML值将为null。

readyState

像前面这样发送同步请求当然没有什么问题，但是在多数情况下，我们还是要发送异步请求，才能让js继续执行而不必等待响应。此时，可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段：

0：未初始化，尚未调用open（）方法
1：启动。已经调用open（）方法，但尚未调用send（）方法。
2：发送。已经调用send（）方法，但尚未接收到响应。
3：接收。已经接收到部分相应数据。
4：完成。已经接受到全部响应数据，而且已经可以在客户端使用了。

只要readyState的值由一个值变成另一个值，就会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。
通常，我们只对readyState值为4的阶段感兴趣，因为这时所有数据都已经就绪。
一般都在调用open（）之前指定onreadystatechange事件处理程序：

var xhr = new XMLHttpRequest();
xhr.onreadystatechage = function(){
    if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        }else{
            alert("request is unsuccessful:"+xhr.status);
        }
    }
}
xhr.open("get","example.php",true);
xhr.send(null);

abort（）

在接收到响应之前还可以调用abort（）方法来取消异步请求：

xhr.abort（）;

调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。
在终止请求之后，还应该对XHR对象进行解引用操作。
由于内存原因，不建议重用XHR对象。

HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息，XHR对象也提供了操作这两种头部（请求头部和响应头部）信息的方法。
默认情况下，在发送XHR请求的同时，还会发送下列头部信息：

Accept：浏览器能够处理的内容类型
Accept-Charset：浏览器能够显示的字符集
Accept-Encoding：浏览器能够处理的压缩编码
Accept-Language：浏览器当前设置的语言
Connection：浏览器与服务器之间连接的类型
Cookie：当前页面设置的任何Cookie
Host：发出请求的页面所在的域
Referer：发出请求的页面的URI
User-Agent：浏览器的用户代理字符串

虽然不同浏览器实际发送的头部信息会有所不同，但以上列出的基本上是所有浏览器都会发送的。
使用setRequestHeader（）方法可以设置自定义的请求头部信息。这个方法接收两个参数：头部字段的名称和头部字段的值。
要成功发送请求头部信息，必须在调用open方法之后且调用send方法之前调用setRequestHeader（）。

xhr.open("get","example.php",true);
xhr.setRequestHeader("myHeader","myValue");
xhr.send(null);

服务器在接收到这种自定义的头部信息之后，可以执行相应的后续操作。

调用XHR对象的getResponseHeader（）方法并传入头部字段名称，可以取得相应的响应头部信息。
而调用getAllResponseHeaders（）方法则可以取得一个包含所有头部信息的长字符串。

在服务器端，也可以利用头部信息向浏览器发送额外的、结构化的数据。

GET请求

GET是最常见的请求类型，最常用于向服务器查询某些信息。
必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。
对XHR而言，位于传入open（）方法的URL末尾的查询字符串必须经过正确的编码才行。

使用GET请求经常会发生的一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent（）进行编码，然后才能放到URL末尾；且所有名值对儿都必须由和号&分隔：

xhr.open("get","example.php?name1=value1&name2=value2",true);

POST请求

使用频率仅次于GET的POST请求，通常用于向服务器发送应该被保存的数据。
POST应该把数据作为请求的主体提交，而GET则不是。
POST请求的主体可以包含非常多的数据，而且格式不限。
在open方法的第一个参数位置传入“post”，就可以初始化一个post请求：

xhr.open("post","example.php",true);

发送POST请求的第二步就是向send（）方法中传入某些数据。
默认情况下，服务器对POST请求和提交Web表单的请求并不会一视同仁。因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。
不过可以用XHR来模仿表单提交，这里不展开了。

XMLHttpRequest2级

XMLHttpRequest2级进一步发展了XHR，但并非所有浏览器都实现了。

FormData

现代web应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest2为此定义了FormData类型。FormData为序列化表单以及创建于表单格式相同的数据提供了便利。
下面的代码创建了一个FormData对象，并向其中添加了一些数据。

var data = new FormData();
data.append("name","nicholas");

这个append方法接收两个参数：键和值，分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。

而通过向FormData构造函数中传入表单元素，也可以用表单元素的数据预先向其中填入键值对：

var data = new FormData(document.forms[0]);

创建了FormData的实例之后，可以将它直接传给XHR的send（）方法：

xhr.send(new FormData(form));

使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型时FormData的实例，并配置适当的头部信息。

超时设定

XHR有一个timeout属性，表示请求在等待响应多少毫秒之后就终止。
在给timeout设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，进而会调用ontimeout事件处理程序。

xhr.open("get","example.php",true);
xhr.timeout = 1000;
xhr.ontimeout = function(){
    alert("request didn't return in a second");
}
xhr.send(null);

这个例子设置timeout属性为1000毫秒，意味着如果请求在1秒钟内还没有返回，就会自动终止。请求终止时，会调用ontimeout事件处理程序。
而这时候readyState可能已经改变为4了，这意味着会调用onreadystatechange事件处理程序。但是，如果在超时中止请求之后再访问status属性，就会导致错误。
为避免浏览器报告错误，可以将检查status属性的语句封装在一个try-catch中。

overrideMimeType（）方法

这个方法用于重写XHR响应的MIME类型。因为返回的MIME类型决定了XHR对象如何处理它，所以提供一种方法能够重写服务器返回的MIME类型是很有用的。
比如服务器返回的MIME类型是text/plain，但数据中实际包含的是XML。根据MIME，即使数据是XML，但是responseXML仍为null。通过调用overrideMimeType（）方法，可以保证把响应当做XML而非纯文本来处理：

xhr.open("get","example.php",true);
xhr.overrideMimeType("text/xml")
xhr.send(null);

这个例子强迫XHR对象将响应当做XML而非纯文本来处理。
调用overrideMimeType（）必须在send方法之前，才能保证重写响应的MIME类型。

进度事件

进度事件定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作，但目前也被其他API借鉴。
有以下6个进度事件：

loadstart：在接收到响应数据的第一个字节时触发
progress：在接收响应期间持续不断的触发
error：在请求发生错误时触发
abort：在因为调用abort（）方法而终止连接时触发
load：在接受到完整的响应数据时触发
loadend：在通信完成或者触发error、abort或load事件后触发。

每个请求都从触发loadstart开始，接下来是一或多个progress事件，然后触发error、abort或load事件中的一个，最后以触发loadend事件结束。

目前还没有浏览器支持loadend事件。

load事件

响应接收完毕后将触发load事件，因此也没有必要去检查readyState属性了。
onload事件处理程序会接收一个event对象，其target属性就指向XHR对象实例，因而可以访问到XHR对象的所有方法和属性。
然而不是所有浏览器都为这个事件实现了适当的事件对象。结果开发人员还是要使用xhr对象：

xhr.onload = function(){
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        }else{
            alert("request is unsuccessful:"+xhr.status);
        }
}
xhr.open("get","example.php",true);
xhr.send(null);

只要浏览器接收到服务器的响应，不管其状态如何，都会触发load事件。而这意味着你必须要检查status属性，才能确定数据是否真的已经可用了。

progress事件

progress事件会在浏览器接收新数据期间周期性地触发。
onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含额外3个属性：

lengthComputable：表示进度信息是否可用的布尔值
position：已经接收的字符数
totalSize：根据Content-length响应头部确定的预期字节数。

有了这些信息，我们就可以为用户创建一个进度指示器了：

xhr.onprogress = function(){
    var divStatus = document.getElementById("status");
    if(event.lengthComputable){
        divStatus.innerHTML = "Recieved"+event.position +"of" +event.totalSize +"bytes";
    }
}
xhr.open("get","example.php",true);
xhr.send(null);

为确保正常执行，必须在调用open（）方法之前添加onprogress事件处理程序。

Ajax优缺点

Ajax优点

无刷新更新数据
异步与服务器通信
数据与呈现分离

Ajax缺点

破坏浏览器的后退功能
安全问题

jQuery实现ajax

jQuery对Ajax操作进行了封装：

$.ajax( )是最底层的方法
load( )、$.get( )、$.post( )是第二层方法
$.getScript( )和$.getJSON( )是第三层方法

load( )

load( )方法是jQuery种最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中。
它的结构为：

load(url [,data] [,callback])

url：请求HTML页面的URL地址
data（可选）：发送至服务器的key/value数据
callback（可选）：请求完成时的回调函数，无论请求成功还是失败。

$(#send).click(function(){
    $("container").load("test.html");
})

我们还可以对载入的HTML文档进行筛选。比如只载入目标页面内的某些元素，那么可以在load方法的URL参数中指定选择符。
这样，URL参数的语法结构为“url selector”，注意，url和selector中间有一个空格。

$("container").load("test.html .para");

以上代码表明只载入test.html页面中class 为“para”的内容。

传递方式

若load（）方法指定了参数data，则采用POST方式；如果没有指定则采用GET方式传递：

//无参数传递，则是GET方式
$("#container").load("test.html",function(){
    ……
})

//有参数传递，则是POST方式
$("#container").load("test.html",{name:"rain"},function(){
    ……
})

回调参数

对于必须在加载完成后才能继续的操作，load（）方法提供了回调函数。
此函数有三个参数，分别代表responseText、textStatus和XMLHTTPRequest对象。

$("#container").load("test.html",function(responseText,textStatus,XMLHTTPRequest){
    //responseText：请求返回的内容
    //textStatus：请求状态：success、error、notmodified、timeout4中
    //XMLHTTPRequest对象
})

在load（）方法中，无论Ajax请求是否成功，只要请求完成（complete），回调函数就被触发。

$.get（）

load（）方法通常用来从web服务器上获取静态的数据文件。
在项目中，如果需要传递一些参数给服务器，那么可以使用$.get()、$.post()或者$.ajax()。

$.get()、$.post()方法是jQuery中的全局函数，并不像load（）方法那样是对jQuery对象进行操作的。

$.get()方法使用GET方式来进行异步请求。

它的结构为：

$.get(url [,data] [,callback] [,type])

其中的参数为：

url：请求的url地址
data（可选）：发送至服务器的key/value数据，会作为QueryString附加到请求URL中。
callback（可选）：载入成功时的回调函数（只有Response的返回状态是success才调用该方法），自动将请求结果和状态传递给该方法。
type（可选）：服务端返回内容的格式，包括xml、html、script、json、text

$.get("getInfo",{
            username:$("#username"),
            content:$("#content")
        },function(data,textStatus){
            //data：返回的内容
            //textStatus：请求状态，success、error、notmodified、timeout
})

get方法中的回调函数只有当数据成功返回后才被调用，这点与load（）方法不一样。

数据格式

服务器返回的数据格式可以有多种：

HTML
由于服务器返回的数据格式是html，因此不用做任何处理就可以将新的HTML数据插入到主页面中。

$.get("getInfo",{
            username:$("#username"),
            content:$("#content")
        },function(data,textStatus){
            $("#resContent").html(data);
})

XML文档
由于服务器端返回的数据格式是XML文档，因此需要对返回的数据进行处理。
JSON文件
由于XML文档体积大且难以解析，JSON文件格式得以广泛使用。
由于服务器端返回的数据格式是JSON文件，因此需要对返回的数据进行处理之后，才可以将新的HTML数据添加到页面中。

$.get("getInfo",{
            username:$("#username"),
            content:$("#content")
        },function(data,textStatus){
            var username = data.username;
            var content = data.content;
            var htmlStr = "<div>"+username+content+"</div>";
            $("#resContent").html(htmlStr);
},json)

在上面的代码中，将第4个参数设置为json来代表期待服务器端返回的数据格式。

$.post（）

它与get（）方法的结构和使用方式都相同，不过它们之间仍有以下区别：

GET请求会将参数跟在URL后进行传递，而POST则是作为HTTP消息的实体内容发送给Web服务器。当然，在Ajax中，这种区别对用户是不可见的。
GET方式对传输的数据大小有限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论上不受限制）。
GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，可能会带来安全性问题。
而POST方式则可以避免这些问题。
GET方式和POST方式传递的数据在服务器端的获取也不相同。

$.post("getInfo",{
            username:$("#username"),
            content:$("#content")
        },function(data,textStatus){
            $("#resContent").html(data);
})

当load（）方法有参数传递时，会使用POST方式发送请求，因此也可以使用load（）方法完成同样的功能：

$("#resContent").load("getInfo",{
            username:$("#username"),
            content:$("#content")
})；

上面使用load（）、$.get（）和$.post（）方法完成了一些常规的Ajax程序，如果哈需要编写一些复杂的Ajax程序，那么就要用到$.ajax()方法了。$.ajax()不仅能实现与前面三个方法相同的功能，而且还可以设定以下几个回调函数：

beforeSend（提交前回调函数）
error（请求失败后处理）
success（请求成功后处理）
complete（请求完成后处理）

还有一些参数可以设置Ajax请求的超时时间或者页面的最后更改状态等。将在后面讲解。

$.getScript（）

有时候，在页面初次加载时就取得所需的全部js文件时完全没有必要的。虽然可以在需要的时候动态创建script标签，但是这种方式也不是那么理想。
因此jQuery提供了$.getScript()方法来直接加载js文件。

$.getScript("test.js");

与其他方法一样，$.getScript()方法也有回调函数，它会在js文件成功载入后运行。

$.getJSON（）

$.getJSON（）用于加载JSON文件，与$.getScript()用法相同。

$.getJSON("test.json",function(data){
    //data：返回的数据
})

ajax（）

$.ajax()方法是jQuery最底层的Ajax实现。它的结构为：

$.ajax(options)

该方法只有一个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息。
参数以key/value的形式存在，所有参数都是可选的。常用参数有以下这些：

url：发送请求的地址，默认为当前页
type：请求方式（POST或GET），默认为GET。其他HTTP请求方法，例如PUT和DELETE也可以使用，但仅部分浏览器支持。
timeout：设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
data：发送到服务器的数据。GET请求将附加在URL后面。
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息返回responseXML或responseText，并作为回调函数参数传递。
可用的类型如下：
- xml
- html：返回纯文本HTML信息，包含的script标签会在插入DOM时执行。
- script：返回纯文本js代码。
- json：返回json数据
- jsonp：JSONP格式
- text
beforeSend：发送请求前可以修改XMLHttpRequest对象的函数。例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest是唯一的参数。

function(XMLHttpRequest){
    //this：调用本次Ajax请求时传递的options参数
}

complete：请求完成后调用的回调函数（请求成功或失败时均调用）。
参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest,textStatus){
    //this：调用本次Ajax请求时传递的options参数
}

success：请求成功后调用的回调函数。有两个参数：
- 由服务器返回，并根据dataType参数进行处理后的数据
- 描述状态的字符串

function(data,textStatus){
    //this：调用本次Ajax请求时传递的options参数
    //data：可能是XML、JSON、HTML、text等
}

error：请求失败时被调用的函数。该函数有三个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象（可选）。

function(XMLHttpRequest,textStatus,errorThrown){
    //this：调用本次Ajax请求时传递的options参数
    //通常textStatus和errorThrown只有其中一个包含信息
}

global：默认为true，表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件。

如果要使用$.ajax()方法来进行Ajax开发，那么上面这些常用的参数都必须了解。

前面用到的load() $.get() $.post() $.getScript() $.getJSON()的这些方法，都是基于$.ajax()方法构建的，$.ajax()方法是jQuery最底层的Ajax实现，因此可以用它来代替前面所有方法。

例如，可以用下面的代码代替$.getJSON()方法：

$.ajax({
    type:"GET",
    url:"test.js",
    dataType:"json",
    success:function(data){
        ……
    }
})

jQuery中的Ajax全局事件

jQuery简化Ajax操作不仅体现在调用Ajax方法和处理响应方面，还体现在对调用Ajax方法的过程中的HTTP请求的控制。

通过jQuery提供了一些自定义全局函数，能够为各种与AJAX相关的事件注册回调函数。

ajaxSend（callback）：Ajax请求发送前时执行的函数
ajaxComplete（callback）：Ajax请求完成时执行的函数
ajaxSuccess（callback）：Ajax请求成功时执行的函数
ajaxError（callback）：Ajax请求发生错误时执行的函数，被捕捉到的错误可以作为最后一个参数传递。

这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就会触发他们。

如果想使某个Ajax请求不受全局方法的影响，那么可以在使用$.ajax(options)方法时，将参数中的global设置为false：

$.ajax({
    url:"test.html",
    global:false  //不触发全局Ajax事件
})

Fetch API

使用 jQuery 虽然可以大大简化 XMLHttpRequest 的使用，但 XMLHttpRequest 本质上但并不是一个设计优良的 API：

不符合关注分离（Separation of Concerns）的原则
配置和调用方式非常混乱
使用事件机制来跟踪状态变化
基于事件的异步模型没有现代的 Promise，generator/yield，async/await 友好

Fetch API 旨在修正上述缺陷，它提供了与 HTTP 语义相同的 JS 语法，简单来说，它引入了 fetch() 这个实用的方法来获取网络资源。

有关于Fetch的信息可以参考什么是Fetch

gigi就是我

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记：Ajax

Ajax，（Asynchronous JavaScript + XML），能够向服务器请求额外的数据而无需卸载页面。 Ajax技术的核心是XMLHttpRequest对象（简称XHR）。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息，意味着用户单击后可以不必刷新页面也能取得新数据。XMLHttpRequest对象大多数现代浏览器都支持原生的XHR对象，
复制链接

扫一扫

专栏目录