ajax入门

Ajax

异步对象：

var xmlHttpRequest = new XMLHttpRequest();

ajax：saynchronous js and xml

步骤

1. 创建异步对象

   var xmlHttpRequest = new XMLHttpRequest();

2. 给异步对象绑定事件

   onreadystatechange:当异步对象发起请求，获取了数据都会触发这个事件，这个事件需要指定一个函数，在函数中处理状态的变化。

   例如：xmlHttpRequest.onreadystatechange = function() {处理请求的状态变化}

   onreadystatechange属性：一个js函数名或直接定义函数，每当readyState的属性改变时，就会调用该函数

   readyState属性：存在XMLHttpRequest的状态，从0到4发生变化。

   • 0: 请求未初始化，创建异步请求对象 var xmlHttpRequest = new XMLHttpRequest();
   • 1: 初始化异步请求对象，xmlHttp.open(请求方式，请求地址，true);
   • 2: 异步对象发送请求,xmlHttpRequest.send()
   • 3: 异步对象接收应答数据(从服务器段返回的数据),xmlHttpRequest内部处理
   • 4: 异步对象已经将数据解析完毕，此时才可以读取数据。开发人员在此时处理数据。开发人员在这时进行页面的更新。

   status属性:表示网络的状况。常见有200,404,500...当status === 200时，表示网络的请求成功。

3. 初始化异步请求对象

   异步的方法为open()

   xmlHttpRequest.open("请求的方式get/post","请求的服务器访问地址",true(表示发送的请求为异步请求,默认值)/false(表示发送的请求为同步请求))

4. 使用异步对象发送请求

   xmlHttpRequest.send()

获取服务器端返回的数据，使用异步对象的属性xmlHttpRequest.responseText

向后端传送数据

在xmlHttpRequest.send()方法中加入需要传入的参数即可。

获得后端发送的数据

通过xmlHttpRequest.responseText就可以获得后端发送的数据

如果后端发送的数据为json类型的，可以通过下面两种方式将后端传入的数据转为json类型

1. var json =eval("(" + xmlHttpRequest.responseText + ")") ;

   然后就可以使用获得的json对象，通过.属性名的方式就可以获得相关的属性

2. var json = JSON.parse(xmlHttpRequest.responseText);

两种方法的区别是第二种方法在解析json数据时会对其进行格式的检查，如果不正确就不进行解析。而第一种方法可以解析任何的字符串，是不安全的。推荐使用第二种解析json数据的方法。