Ajax实现

XMLHTTPRequest对象的属性

1.readystatechange 每次状态改变所触发事件的事件处理程序

2.responseText 从服务器进程返回数据的字符串形式

3.responseXML 从服务器进程返回的DOM兼容的文档数据对象

4.statusText 伴随状态码的字符串信息

5.status：从服务器返回的数字代码

1xx:信息响应类，表示接收到请求并且继续处理。

2xx:处理成功响应类，表示动作被成功接收、理解和接受。

3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理 。

4xx:客户端错误，客户请求包含语法错误或者是不能正确执行 。

5xx:服务端错误，服务器不能正确执行一个正确的请求。

6.readyState:XHR请求的状态属性

0：未初始化。尚未调用open()方法

1：启动。调用open（）方法，但未调用send（）方法。

2：发送。已调用send()方法，尚未收到响应数据

3：接收。已经收到部分响应数据。

4：完成。已经收到全部响应数据，可以在客户端使用了。

XHR对象的方法

1.abort() 导致当前正在执行的请求被取消

2.getAllResponseHeaders() 返回包含所有响应头的名称和值的单个字符串

3.getResponseHeader(name) 返回响应头中指定的名称和值

4.open(method,url,async,pwd) 设置HTTP方法（get或post等）

5.send(content) 发出带有指定主体内容的请求

6.setRequestHeader(name,value) 使用指定的名称和值设置请求头

  var request = null;
  if(window.XMLHttpRequest){
    request = new XMLHttpRequest();
  }else{
    request = new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  request.onreadystatechange = function(){
    if(request.readyState===4 && request.status===200){
        document.getElementById("myId").innerHTML = request.responseText;
        //函数具体逻辑
        
    }
  }
  request.open("GET",url,true);  //指定请求，要访问url下的文件，true表示异步请求
  request.setRequestHeader("Content-type","text/plain");  //请求头设置
  request.send(null);  //发送请求主体

onreadystate事件写在open前面，确保跨浏览器兼容性。

GET、POST

与POST相比，GET更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，要使用POST请求：

1.无法使用缓存文件（更新服务器上的文件或数据库）

2.向服务器发送大量数据（POST没有数据量限制）

3.发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

只要readyState属性的值发生变化，便会触发一次readystatechange事件

JQuery中的Ajax

$.ajax()

$.ajax()是所有Ajax方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装，$.ajax()只有一个参数，是一个对象。

$.ajax()方法的对象参数

url：String类型。发送请求的地址

type:String类型。请求方法，默认GET

timeout：Number类型。设置请求超时的时间

data：Object/String。发送到服务器的对象，键值对字符串或对象

datatype：String。返回的数据类型，比如html，xml，json等

success：Function。请求成功后调用的回调函数

complete：Function。请求完成后调用的回调函数

error：Function。请求失败后调用的回调函数

$(function(){
  $("input").click(function(){
    $.ajax({
      type:"post",
      url:"test.php",
      data:{url:"baidu.com"},
      success:function(response,status,xhr){
         $("box").html(response);
      }
    });
  });
});

使用Ajax的优缺点

优点:

1.无刷新更新数据

2.异步与服务器通信

3.前端和后端负载平衡

4.基于标准被广泛支持

5.界面与应用分离

缺点：

1.ajax干掉了back和History功能，即对浏览器机制的破坏。在动态更新页面的情况下，用户无法回到前一个页面的状态，因为浏览器仅能记忆历史记录中的静态页面。在ajax中，用户想要单击后退按钮取消操作，是无法实现的。

2.安全问题。ajax难以避免一些已知的安全弱点，诸如跨站点脚本攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

3.对搜索引擎支持较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

4.破坏程序的异常处理机制

5.违背URL和资源定位的初衷。

6.AJAX不能很友好的支持移动设备。

7.客户端过胖，太多移动端代码造成开发上的成本。