Ajax初学习

Ajax，英文AsynchronousJavascriptAnd XML”（异步Javascript和XML）是一种用于创建快速动态网页的技术。

Asynchronous ：浏览器支持异步通信模式，实现局部页面刷新

JavaScript：使用的编程语言

and

XML：通信数据的承载方式，但是实际上很少使用mxl格式

        通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

举个例子：

        传统方式下，我们提交表单，当输入完成后点击确定并提交，然后页面重新加载并刷新，用户得要等待一会，在这期间不能对页面进行其他操作。即页面被锁住，好了，页面刷新好了，结果用户却被提示“输入有误”，这是不是很坑，这种情况给用户所带来的体验是非常差劲的，那么我们的Ajax就可以解决这一问题。它可以做到，不弹出结果页，在该页面局部给出提示信息，“输入的xx有无”，用户无需等待页面重新加载，因为只进行了局部页面刷新，整个页面也并没有被锁死，我们可以进行其他操作。

详解：

在输入框中输入信息，马上向服务器发送请求，获取一个与输入匹配的列表提示，我们需要向输入框绑定一个监听事件，利用ID获取到文本对象

1.创建XMLHttpRequestx对象（ajax的核心对象）

对于大多数浏览器都内置了XMLHttpRequest，可以直接new就可以得到该对象的实例。

此处呢，需要考虑浏览器的兼容问题

function createXHR(){
   //不支持低版本浏览器的创建对象的方法，IE7+
   return new XMLHttpRequest();
  }

再来一发兼容性考虑周全的：

//兼容浏览器的方式创建对象，所有支持ajax的浏览器
  function createXHR2(){
   var xhr=null;
   if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
   }else if(window.ActiveXObject){
    try{
     xhr=new ActiveObject('Msxml2.XMLHTTP');
    }catch(e){
     try{
      xhr=new ActiveXObject('Microsoft.XMLHTTP');
     }catch(e){}
    }
   }
   return xhr;
  }

level2完全兼容level1；

进行创建时，从高版本到底版本进行考虑，IE6+，IE6，IE6以下

2.ajax请求的发起

//创建http请求对象
   var xhr=createXHR2();

open方法初始化操作，send方法真正向服务器发送信息，只有执行open方法后才能进行send操作。

xhr.open('GET','http://test/...',true);

//true代表是异步请求,false是同步请求（降低用户体验），get是数据传送方式只能将你要提交的数据放在URL里，URL是目标地址

还有两个参数没有写，这个是当进行密码验证时会用到。

异步是ajax的亮点，用户体验很好，但是复杂度会提高。在某些不影响用户体验的情况下，可以使用同步请求（不建议使用，所有的异步方式问题现在都有相关技术可以解决）

接下来设置请求头

xhr.setRequestHeader("content-type","application/json");

//给当前的请求设置请求头，告诉服务器当前发送的数据是以json的格式来组织
//添加自定义请求头：
//xhr.setRequestHeader("text","value");

发送数据：

浏览器如果没有内置json对象该怎么办？引入json2库。

浏览器不能识别json对象，所以我们要将json对象序列化

xhr.send(JSON({
    keyword:'c',
    other:'test'
   }));

3.相应的接收与处理

当浏览器返回结果时是需要给程序发送通知的，然后才会继续处理，这种通知机制就是事件。

怎样获知数据是否发送完成

readyState 5种状态：获知数据是否发送完成
     //0 没有初始化没有send时
     //1 链接建立、请求发出
     //2 览器与服务器建立连接，服务器返回响应，
     //3 交互（处理数据）
     //4 完成

用if语句进行判断。

得到返回的数据后，我们需要处理一下，如果返回的是json字符串，我们需要将其转换成json对象

//如果想要的是文本，那就不用处理

//将字符串转换为json对象
     JSON.parse(xhr.responseText);

//如果浏览器没有内置json对象，
     eval(xhr.responseText)；

最后再讲一下level2的新增处理：timeout：设置超时提醒，单位是ms

xhr.timeout=5000;