Ajax初入门

定义

Ajax是当不重新加载整个页面的情况下，向服务器请求额外的数据。就是我们所说的实现网页的异步刷新。

 

XHR 对象

Ajax技术的核心是XMLHttpRequest对象，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能以异步的方式从服务器取得更多的信息，意味着用户单击后，可以不必刷新页面也能取得数据。这个单词包含XML,Http,Rquest,的确，ajax与这三者都有关系 ：

• XML ：可作为ajax交互数据的数据类型，当然也不仅局限于xml，像我们所知的json,jsonp,html,script,text都可以作为数据类型。
• http : 使用ajax技术其实就是通过发送HTTP请求和接收响应的来达到目的。可以通过配置发送请求头信息来使服务器做出相应的响应。
• request ：说宽泛一些就是request和response，请求和响应，get请求，post请求，然后操作响应信息。

 

XMLHttpRequest 对象的属性和方法

属性：

1. readyState：HTTP 请求的状态
2. responseText：响应体（不包括头部）
3. responseXML：对请求的响应，解析为 XML 并作为 Document 对象返回。
4. status：由服务器返回的 HTTP 状态代码，如 200 表示成功
5. statusText：这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。

方法：

1. abort() : 取消当前响应，关闭连接并且结束任何未决的网络活动。
2. getAllResponseHeaders()：把 HTTP 响应头部作为未解析的字符串返回。
3. getResponseHeader()：返回指定的 HTTP 响应头部的值。
4. open()：初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
5. send()：发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
6. setRequestHeader()：向一个打开但未发送的请求设置或添加一个 HTTP 请求。

 

具体实现过程

1 当客户端（浏览器）有异步请求的需求时，创建XMLHttpRequest，为了兼容IE5 和 IE6 (使用 ActiveXObject)

var xmlhttp;
    if (window.XMLHttpRequest)
     {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
     }
    else
     {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

2 根据XMLHttpRequest对象的readystate属性值来判断请求是否正确被响应

[table id=2 /]

    
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

思考题：readystate 和 status都是监控状态，两者有什么区别？

 

使用回调函数

回调函数是一种以参数形式被传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 一个函数来处理XMLHttpRequest 对象（下面用例中指 loadDoc函数），和一个回调函数处理每个 AJAX 任务（指 myFunction1，myFunction2），相当于需要有函数来处理每个由服务器发回给客户端的响应报文

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

 

//两个Ajax任务，url表示你要获取的文件的路径，myFunctionx是回调函数

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);   
    }
 };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
  // 具体任务
} 
function myFunction2(xhttp) {
  // 具体任务
}
//如何可以用实例

实例

参考：https://www.w3schools.com/xml/ajax_php.asp

转载于:https://www.cnblogs.com/Lorraine2017/p/6817304.html