AJAX请求

2019-02-18 本文已影响0人极客传

原生JavaScript中的AJAX请求

AJAX = Asynchronous JavaScript and XML（异步的JavaScript和XML）。

ajax 原生 js 的写法：创建 XmlHttpRequest 对象（IE6+及IE6），onreadystatechange 事件（响应的处理），向服务器发送给请求。

创建XmlHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest)
{
    // IE7+,Firefox,Chrome，Opera，Safari浏览器执行代码
    xmlhttp = new XMLHttpRequest();
}
else
{
    //IE6,IE5浏览器执行代码
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有XMLHttpRequest的状态信息。

注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

以下时XMLHttpRequest对象的三个重要属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当`readyState`属性改变时，就会调用该函数。
readyState	存有XMLHttpRequest的状态。从0到4发生变化。<br />- 0：请求未初始化<br />- 1：服务器连接已建立<br />- 2：请求已接收<br />- 3：请求处理中<br />- 4：请求已完成，且响应已就绪
status	200："OK"<br />404：未找到页面

服务器响应

如需获得来自服务器的响应，使用XMLHttpRequest对象的responseText 或 responseXML 属性。

responseText 获得字符串形式的响应数据。responseXML 获得XML形式的响应数据，还需要作为XML对象进行解析。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

发送XMLHttpRequest请求

如需将请求发送到服务器，使用XMLHttpRequest对象的open()和send()方法；

xmlhttp.open(method, url, async); // 设置请求方法、地址、是否异步
setRequestHeader(header,value); // 设置请求头部
xmlhttp.send(); // 发送请求

方法	描述
open(method,url,async)	规定请求的类型、URL以及是否异步处理请求。<br />- method：请求的类型，GET或POST<br />-url：文件在服务器上的位置<br />-async：true（异步）或false（同步）
send(string)	将请求发送到服务器<br />-string：仅用于POST请求

GET还是POST？

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

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

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

GET请求

一个简单的GET请求：

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

在上面的例子中，你可能得到的是缓存的结果。

为了避免这种情况，请向URL添加一个唯一的ID：

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),"true");
xmlhttp.send();

如果你希望通过GET方法发送信息，请向URL添加信息：

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

POST请求

一个简单的POST请求：

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

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

xmlhttp.open("POST","",true);
serRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&name=Ford");

异步-true或false

AJAX指的是异步JavaScript和XML（Asynchronous JavaScript and XML）。

XMLHttpRequest对象如果要用于AJAX的话，其open()方法async参数必须设置为true。

很多在服务器执行的任务都相当费时。AJAX出现之前，这可能会引起应用程序挂起或停止。而通过AJAX，JavaScript无需等待服务器的响应，而是：在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理。

async = true

当使用async = true时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttpsend();

async = false

如需使用async = false，请将open()方法中的第三个参数改为false：

不推荐使用 async = fasle ，但是对于一些小型的请求，也是可以的。

JavaScript会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注意：使用async = false 时，请不要编写onreadystatechange 函数，把处理响应的代码放到 send() 语句后面即可：

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

AJAX实例

创建请求对象，指定状态改变时的处理函数，发送请求。

var xmlhttp;
if ( window.XMLHttpRequest )
{
    xmlhttp = new window.XMLHttpRequest();
}
else
{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

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

xmlhttp.open("GET",url,true);
xmlhttp.send();