Ajax指南

Posted 2022-10-02 xiaxu

AJAX工作原理

一，Ajax所包含的技术

Ajax并非一种新的技术，而是原有技术的结合体。它由下列技术组合而成。

1. 使用CSS和Xhtml来表示。
2. 使用DOM模型来交互和动态显示。
3. 使用XMLHttpRequest来和服务器进行异步通信。
4. 使用javascript来绑定和调用。

二，怎样创建Ajax

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用Javascript来操纵DOM而更新页面。这当中最为关键的一步就是从服务器获得请求数据。

原生创建Ajax可分为以下四步：

1，创建XMLHttpRequest对象

所有现代浏览器均内建XMLHttprequest对象。如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveObject:

var xhr = new XMLHttpRequest();

老版本的IE（5和6）使用ActiveX对象；

var xhr = new ActiveXobject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，则用如下代码，

var xhr;
if (XMLHttpRequest)
    xhr = new XMLHttpRequest();
else
    xhr = new ActiveXObject("Microsoft.XMLHTTP");

2，准备请求

初始化该XMLHttpRequest对象，接受三个参数：

xhr.open(method,url,async);

第一个参数表示请求类型的字符串，其值可以是GET或者POST。GET请求：

xhr.open("GET",demo.php?name=tsrot&age=24,true);

POST请求：

xhr.open("POST",demo.php,true);

第二个参数是要作为请求发送目标的URL。第三个参数是true或者false,表示请求是一异步还是同步模式发出。

• false:同步模式发出的请求会暂停所有Javascript代码的执行，直到服务器获得响应为止。如果浏览器在连接网络时或者在下载文件时候出了故障，页面就会一直挂起。
• true:异步模式发出的请求，请求对象收发数据的同时，浏览器可以继续加载页面，执行其他Javascript代码。

3，发送请求

xhr.send();

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的URL参数中，此时的send方法的参数为null或者空。

GET请求：

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

POST请求：如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头部。然后在send()方法中规定要发送的数据：

xhr.open("POST",demo.php,true);
xhr.setRequestHeader("Content-Type","application/x-www-formm-urlencoded;charset=UTF-8");
xhr.send("name"+uerName+"&age="+userAge);

4，处理响应

xhr.onreadystatechange = function()
if(xhr.readyState == 4 && xhr.status ==200)
    console.log(xhr.responseText);

• 0 (未初始化) or (请求还未初始化)
• 1 (正在加载) or (已建立服务器链接)
• 2 (加载成功) or (请求已接受)
• 3 (交互) or (正在处理请求)
• 4 (完成) or (请求已完成并且响应已准备好)

4，完整示例

<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() 
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() 
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) 
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  

  function alertContents() 
    if (httpRequest.readyState === XMLHttpRequest.DONE) 
      if (httpRequest.status === 200) 
        alert(httpRequest.responseText);
       else 
        alert('There was a problem with the request.');
      
    
  
)();
</script>

在这个例子中：

• 用户点击 “Make a request” 按钮；

• 事件处理调用 makeRequest() 函数；

• 请求已通过然后（onreadystatechange）传给 alertContents() 执行。

• alertContents() 检查返回的响应是否OK，然后 alert() test.html 文件内容。

三，Ajax应用场景

• 数据验证

• 按需求取数据

• 自动更新页面

四，Ajax的优缺点

优点：

• 页面无需刷新，用户体验好 。
• 异步通信，更快的响应能力。
• 减少冗余请求，减轻的服务器负担。
• 基于标准化并被广泛支持的技术，不需要插件或者小程序。

缺点：

• Ajax干掉了bakc按钮,即对浏览器后退机制的破坏。
• 存在一定的安全问题。
• 对搜索引擎的支持比较弱。
• 破坏了程序的异常机制。
• 无法用URL直接访问。