浅谈我理解的Ajax和JQuery

Ajax是一项技术，借助javascript语言，可以实现异步执行和局部刷新的作用。Ajax不同于JQuery，JQuery是Javascript的库（或框架），封装了很多功能。其中，有个功能是发送Ajax请求。所以，不要把Ajax和JQuery弄混淆，两者有关联，但不是一回事。

JQuery封装了下列几个发送Ajax的方法：

$.get(url, data, callback, type)
$.post(url, data, callback, type)
$.ajax(option)

其次，Ajax的实现, 本质上依赖四个关键步骤：

1. 创建XMLHttpRequest对象。 这里需要注意的是，要做兼容性检查。对于低版本的IE浏览器，直接创建XHR对象是不支持的。  

   示例代码：

   var xhr = null ; 
   if (window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
   } else {
       xhr = new ActiveXObject('Microsoft.XMLHTTP')
   }
   

2. 初始化请求参数，调用Open()方法。这里Open可以是GET请求，也可以是POST请求。
   示例代码：
   
   GET请求　　xhr.open("get", "checkUsername.php?username=" + username, true) // 参数出现在URL中，最后一个表示是否异步
                       xhr.send(null)
   POST请求     xhr.open("post", "checkUsername.php", true) 
                       var param = "username=" + username
                       xhr.send(param)  //参数出现在请求体中
   

3. 发送请求，调用Send()方法。
   示例代码如上所示

4. 根据OnReadyStateChange属性，接受返回的数据。 
   示例代码：
   
   xhr.onreadystatechange =     function(){

   
   

      if (xhr.readyState == 4 ) {
           if (xhr.status == 200) {
                  console.log(xhr.responseText);   // 如果是xml格式的数据，则结果是 xhr.reponseXML
                  document.getElementbyId("result").innertext = xhr.responseText    
   
      }
     }           

   }

   注意： readstate = 0 表示XHR对象创建完成 1 表示已经发送了请求  2 表示浏览器收到了服务器的响应， 3 表示正在解析数据， 4 表示解析完成，可以使用了
   
   http 状态码 200 表示相应成功， 404表示没有找到， 500 表示服务端错误