Ajax的使用代码解析

Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。 

异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式 。

通常不用刷新网页而与服务器通讯的方法:

Flash 框架

Frameset:如果使用一组框架构造了一个网页,可以只更新其中一个框架,而不必惊动整个页面

XMLHttpRequest:该对象是对 JavaScript 的一个扩展,可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成XMLHttpRequest(XHR) 对象的代名词

ajax基本使用

  ajax在我们的开发中是必须使用的一个技术,ajax即异步的javascript和xml但是现在我们通常使用json来完成数据的交互,ajax职责很单一就是数据的交互,发送数据接收数据是它的核心功能也是唯一的功能。

  ajax的实现依赖XMLHttpRequest,它的基本使用如下:

var xhr; window.XMLHttpRequest?xhr = new XMLHttpRequest():xhr = new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("get","demo!register.action?name=zt&age=23",true); xhr.send(null); xhr.onreadystatechange = function(){   if(xhr.readyState==4&&xhr.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 ActiveXObject("Microsoft.XMLHTTP")。

  此时我们已经得到了xhr对象接下来就是发送数据,通过xhr.open()方法来执行发送数据的方式,xhr.open()可以接收5个参数,我们经常使用的是前三个:

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(){...}; xhr.send(...);

  但是由于xhr.onreadystatechange是一个事件,所以其放在send()之后也是可以执行的,出于易读性我们一般都将对xhr的设置放在send()函数之前。

  在send()之后可以通过xhr.readyState和xhr.status的来监测本次请求的状态,如果满足xhr.readyState==4&&xhr.status==200则本次请求成功:

在请求成功时我们可以通过xhr.responseText来获取服务器返回的数据,需要注意xhr.responseText是一个字符串。

Ajax的使用代码解析

ajax常用API

  上面的请求过程是一个最基本的请求过程xhr对象还有几个经常使用的方法分别为xhr.abort()、xhr.setRequestHeader()、xhr.overrideMimeType()。

  xhr.abort():终止一个请求,直接调用即可不需要设置参数

xhr.abort()

  xhr.setRequestHeader():设置发送的请求头:

xhr.setRequestHeader("Content-Type","application/json; charset=utf-8")

  第一个参数表示要设置的header,第二个参数表示要设置的header的值。xhr.setRequestHeader()必须在xhr.open()和xhr.send()之间,否则会抛出异常,同时xhr.setRequestHeader()的第一个参数是对大小写不敏感的只要我们字母写的对就能够设置成功,但是出于易读性我们要设置为正确的格式。

  xhr.overrideMimeType():重写响应头的Content-Type:

xhr.overrideMimeType('text/plain; charset=utf-8')

  xhr.overrideMimeType()同样要设置在xhr.send()之前。

JSON.parse()和JSON.stringify()使用

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjpwwx.html