Ajax的代码分析
Ajax简介
Ajax被认为是异步JavaScript和Xml的缩写。如今，允许浏览器在不刷新当前页面的情况下与服务器通信的技术被称为Ajax。
同步是指发送方发送数据，等待接收方发回响应后再发送下一个数据包的通信方式。
异步是指发送方发送数据，然后发送下一个数据包，而不等待接收方发回响应的通信模式。
在不刷新网页的情况下与服务器通信的方法：
Flash Frameset:如果一个网页是用一组框架构造的，那么只需要更新其中一个框架就可以了，而不会对整个页面的XMLHttpRequest产生告警：这个对象是JavaScript的扩展，使得网页能够和服务器进行通信。是创建Ajax应用程序的最佳选择。事实上，Ajax通常被用作XMLHttpRequest(XHR)对象的同义词
Ajax是我们开发中必须使用的技术。ajax是异步的javascript和xml，但是现在我们通常使用json来完成数据交互。ajax只有一个职责，那就是数据交互。发送和接收数据是它的核心功能和唯一功能。
ajax的实现依赖于XMLHttpRequest，其基本用法如下：
var xhr窗户。XMLHttpRequest？xhr=new XMLHttpRequest(): xhr=new ActiveX object(' Microsoft。XMLHTTP’)；xhr.open('get '，' demo！注册。行动？name=ztage=23 '，true)；xhr . send(null)；xhr . onreadystatechange=function(){ if(xhr . readystate==4xhr . status==200){ alert(JSON . parse(xhr . responsetext))；}}ajax的职责是发送和接收数据。我们的基本使用流程如下：
1.获取一个XMLHttpRequest对象
2.发送数据
3.接收处理服务器返回的数据
根据上述步骤，实现了异步数据请求过程。首先，获得一个xhr对象。在现代浏览器中，我们可以通过实例化直接获得一个xhr对象：var XHR=new xmlhttprequest()；在IE5和IE6中，我们必须使用ActiveXObject来获取xhr对象：var xhr=new ActiveX object(' Microsoft . xmlhttp ')。
此时，我们已经获得了xhr对象，然后我们发送数据。发送数据的方法由xhr.open()实现，它可以接收五个参数，我们经常使用前三个：
Xhr.open(arg1，arg2，arg3)arg1表示请求数据的方式通常是get或post
Arg2代表请求的服务器地址
Arg3表示这个请求是同步的还是异步的，ajax的突出特点是异步，所以我们通常使用异步模式，第三个参数设置为true(true表示异步请求，false表示同步请求)
xhr.open()方法只准备一个请求，调用open后不与服务器通信，只调用send()函数，send()函数的参数将作为请求体发送到服务器。如果我们在open()函数中指定get作为请求模式，我们通常会将send()设置为xhr.send(null)。如果我们想通过请求体发送数据，应该将open()函数的请求模式设置为post，并将我们需要发送的数据作为send()函数的参数：xhr.send(param)。调用send()函数后，与服务器的通信开始。
xhr的所有设置都应该在send()函数之前设置：
xhr.open(.);xhr.setRequestHeader(.);xhr.overrideMimeType(.);xhr . onreadystatechange=function(){ 0.};xhr.send(.);但是，因为xhr.onreadystatechange是一个事件，所以它可以在send()之后执行。为了可读性，我们通常在send()函数之前设置xhr。
在send()之后，这个请求的状态可以被xhr.readyState和xhr.status. If xhr监控。readystate==4xhr。满足状态==200，此请求成功：
当请求成功时，我们可以通过xhr.responseText获取服务器返回的数据，需要注意的是xhr.responsetext是一个字符串。
ajax的通用API
以上请求流程是最基本的请求流程。还有几个常用的方法，即xhr.abort()、xhr.setRequestHeader()和xhr.overrideMimeType()。
Xhr.abort():终止请求并直接调用它，而不设置参数
xhr . abort(). xhr . setrequest header():设置发送的请求头：
xhr . setrequestheader(' Content-Type '，' application/JSON；Charset=utf-8 ')第一个参数表示要设置的头，第二个参数表示要设置的头的值。Xhr.setRequestHeader()必须在xhr.open()和xhr.send()之间，否则会引发异常，并且xhr.setRequestHeader()的第一个参数不区分大小写，只要我们的字母写得正确，就可以设置成功，但是为了可读性，我们应该设置为正确的格式。
覆盖响应头的内容类型：
xhr . overridemitemtype(' text/plain；charset=utf-8 ')xhr . overridemimetype()也应该在xhr.send()之前设置。
JSON.parse()和JSON.stringify()使用
JSON.parse()用于将对象转换为字符串，JSON.stringify()用于将字符串转换为对象。在使用ajax进行数据交互的过程中，返回的大部分数据都是JSON格式的字符串。如果服务器返回数据给我们，我们需要使用JSON.parse()解析返回的数据(xhr.responseText是服务器返回的数据):
xhr . onreadystatechange=function(){ if(xhr . readystate==4xhr . status==200){ var data=JSON . parse(xhr . responsetext)；}}在通过post发送数据的过程中，如果不是文件上传，通常会传输JSON数据。如果想成功发送到后台，需要使用JSON.stringify()将JSON对象转换成字符串，Content-Type应该设置为application/json:
var sendData={name:'zt '，age :23 }；xhr . setrequestheader(' Content-Type '，' application/JSON；charset=utf-8 ')；xhr . send(JSON . stringify(send data))；另外，JSON.parse()和JSON.stringify()可以实现对象的深度复制功能：
var sendData={name:'zt '，age :23 }；var copy data=JSON . parse(JSON . stringify(send data))；$的基本用法。创建交互式、快速动态网页应用的网页开发技术
为了方便JQ的使用，我们封装了一个ajax来方便我们的使用：
$.ajax({ type:'post '，//request url:'url '，//request address data: ' . '，//数据内容类型： ' . '发送到服务器，//设置要发送的数据类型。如果数据是一个json字符串，它应该被设置为application/jsonsuccess3360 function(data){ 0.}.//已成功请求的回调函数数据可以视为server error3360function () {返回的数据.}//请求失败的回调函数})；或者：
$.ajax({ type:'post '，url:'url '，data: ' . '，contentType: ' . }) .完成(功能(数据){ 0.}) .失败(函数(){ 0.});回调函数中的数据是服务器返回的数据的代理，可以直接使用。
为了简化我们的开发，JQ提供了一些全局设置功能，包括$。ajaxSetup()，$。()ajaxStart()，$()。ajaxStop()，$()。ajaxComplete()，$()。ajaxError()，$()。ajaxSuccess()，$()。ajaxSend
$.ajaxSetup()用于设置基本参数，例如：
$.ajaxSetup({ type:'post '，content type : ' application/JSON；charset=utf-8 ' })；当我们使用$。ajax，我们可以直接设置：
$.Ajax ({URL : ' '，成功：函数(){ 0.}，错误： function(){ 0.}})最后相当于：
$.ajax({ type:'post '，content type : ' application/JSON；Charset=utf-8 '，url: ' '，success : function(){ 0.}，error : function(){ 0.}}) $ ().ajaxstart()，$()。ajaxStop()，$()。ajaxComplete()例如，为了防止在提交数据时多次提交，我们需要在发送请求时生成一个加载掩码，并在发送数据后取消该掩码。如果我们每个ajax请求都设置一次，会很麻烦。此时，我们可以使用全局回调函数来简化我们的操作：
使用全局事件在请求开始时生成掩码，并在请求完成时取消掩码：
$(文档)。AJaxstart(function(){ LoAdingMask . show()；});$(文档)。AJaxcomplete(function(){ LoadingMask . hide()；});以上是边肖介绍的Ajax的代码分析，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！
