JavaScript基础-----Ajax

1.什么是Ajax：

    AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。

    Ajax包含下列技术：

• 基于web标准（standards-based presentation）XHTML+CSS的表示；

• 使用 DOM（Document Object Model）进行动态显示及交互；

• 使用 XML 和 XSLT 进行数据交换及相关操作；

• 使用 XMLHttpRequest 进行异步数据查询、检索；

• 使用 JavaScript 将所有的东西绑定在一起

2.Ajax应用程序的优势：

• 1. 通过异步模式，提升了用户体验

• 2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

• 3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载

3.Ajax最大的特点：

        Ajax可以实现动态不刷新（局部刷新）

4.XMLHttpRequest对象的常用方法和属性：

            open(“method”,”URL”) 建立对服务器的调用，第一个参数是HTTP请求    方式可以为GET，POST或任何服务器所支持的您想调用的方式。

第二个参数是请求页面的URL地址

         status    服务器的HTTP状态码，200 ---> ok  400 ---> not found

• send()方法：发送具体请求

• abort()方法：停止当前请求

• readyState：存有服务器响应的状态信息。

  • 0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
  • 1: 服务器连接已建立（open方法已经被调用）
  • 2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
  • 3: 请求处理中（下载中，responseText 属性已经包含部分数据）
  • 4: 请求已完成，且响应已就绪（下载操作已完成）

• responseText 属性 ： 服务器的响应，获得字符串形式的响应数据（数据体内容）

• reponseXML 属性 ：服务器的响应，表示为XML

5.Ajax的优点和缺点：

    优点：        

• 1、最大的一点是页面无刷新，用户的体验非常好。

• 2、使用异步方式与服务器通信，具有更加迅速的响应能力。

• 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

• 4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序

    缺点：

• 1、ajax不支持浏览器back按钮。

• 2、安全问题 AJAX暴露了与服务器交互的细节。

• 3、对搜索引擎的支持比较弱。

• 4、破坏了程序的异常机制。

• 5、不容易调试

6. Jquery 实现 Ajax 的主要步骤：

$.ajax({
    url: 'URL地址，默认是当前页面',
    type: '规定请求的类型（GET 或 POST）',
    dataType: '预期的服务器响应的数据类型',
    async : '布尔值，表示请求是否异步处理。默认是 true'
    data: {
       规定要发送到服务器的数据   
    },
    success: function(){
       当请求成功时运行的函数  
    },
    error: function(){
       当请求失败时运行的函数   
    }
 })

7. 原生js 实现Ajax的主要步骤：

//先处理兼容性问题
var xhr = null;
if(window.MLHttpRequest){
   xhr = new XMLHttpRequest();    //其他浏览器
}else{
   xhr = new ActiveXObject("Microsoft.XMLHTTP")     //老版本的IE浏览器
}                
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200{ 
        // 从服务器获得数据 
        console.log(xhr.responseText);  
      }
    };
    xhr.open('GET/POST', url地址, true);    //GET发送信息时直接加参数到url即可，比如url?a= & b=b1
    xhr.send();
  },
  // 请求格式为POST时，必须要写http头，发送信息至服务器时内容编码类型
  // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  

8.原生js实现对ajax的封装:

//封装ajax，这里以GET请求为例
function ajax(url,fnSucc,fnErr){      //ajax中传递3个参数（请求地址，请求成功的回调函数，请求失败的回调函数）
   //处理兼容性
   if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest(); 
   }else{
      xhr = new ActiveXObject("Microsoft.XMLHTTP") 
   }
   //onload为完成时
   xhr.onload = function(){
       if(xhr.readyState === 4 && xhr.status === 200){
          fnSucc(xhr.responseText)
       }else{
          fnErr(xhr.status)
       }
   }
   //或者还可以这样写
   xhr.onreadystatechange = function(){
       if(xhr.readyState === 4){
          if(xhr.status === 200){
              fnSucc(xhr.responseText) 
          }else{
              fnErr(xhr.status)
          }
       }
   }
   xhr.open("GET",url,true)
   xhr.send()
}
//调用ajax函数
ajax(url地址,function(str){
   console.log("请求成功")
},function(){
   console.log("请求失败")
})