常用的AJAX请求及使用方法

Ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
ajax不是一种新的语言，而是一种新方法。它最大的有点就是能够不刷新整个页面，完成局部刷新，与服务器交换数据并更新部分网页内容，无需任何浏览器插件。
简单来说，ajax=异步JavaScript+XML，是一种创建动态网页的技术，通过在后台与服务器少量的交互，实现网页异步更新。

使用步骤

1、创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础，XMLHttpRequest 用于在后台与服务器交换数据

        // 创建一个XMLHttpRequest 对象
        let xhr=new XMLHttpRequest();

*注意
部分老版浏览器可能不支持XMLHttpRequest 对象，如果不支持则创建ActiveXObject。语法如下：

		let xml;
        if (window.XMLHttpRequest) {
            // 支持 XMLHttpRequest 对象
            xml = new XMLHttpRequest();
        }
        else {
            // 不支持 XMLHttpRequest 对象
            xml = new ActiveXObject("Microsoft.XMLHTTP");
        }

2、向服务器发送请求

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

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

open(method,url,async)方法

规定请求的类型、请求地址、是否异步处理。

1. method：请求的类型，GET或POST。（注意：全部大写或者全部小写）
2. url：请求的地址
3. async：true(异步) 或 false(同步)

send(string)方法

将请求发送到服务器上。
string：仅限用于POST请求

---

GET请求和POST请求

1、GET
不带参数的get请求

xhr.open("GET","/page/demo.html",true);
xhr.send();

带参数的get请求

xhr.open("GET","/page/demo.html?username=name&userpass=password",true);
xhr.send();

2、POST
不带参数的post请求

xhr.open("POST", "/page/demo.html", true);
xhr.send();

带参数的post请求, 在send() 方法中填写希望发送的数据

xhr.open("POST", "/page/demo.html", true);
xmlhttp.send("username=name&userpass=password");

GET和POST的区别：

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
1、无法使用缓存文件（更新服务器上的文件或数据库）。
2、向服务器发送大量数据（POST 没有数据量限制）。
3、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

补充

异步true还是同步false：

AJAX 指的是异步JavaScript和XML（Asynchronous JavaScript and XML）。
XMLHttpRequest对象如果要用于AJAX的话，其open()方法的async参数必须设置为 true。
在AJAX出现之前，很多服务器在执行任务时都想当费时，会引起程序的挂起或停止。而通过AJAX，JavaScript无需等待服务器的响应，而是：
1、在等待服务器响应时，执行其他脚本。
2、响应就绪后对响应进行处理。

3、onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当readyState改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

readyState状态码

readyState存有XMLHttpRequest的状态，从 0 到 4 发生变化。

• 0: 请求未初始化（还没有调用 open()）
• 1: 请求已经建立，但是还没有发送（还没有调用 send()）
• 2: 请求已发送，正在处理中（通常现在可以从响应中获取内容头）
• 3: 请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成
• 4: 响应已完成；您可以获取并使用服务器的响应了

status响应码

• 200：服务器响应正常
• 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）
• 400：无法找到请求的资源
• 401：访问资源的权限不够
• 403：没有权限访问资源
• 404：需要访问的资源不存在
• 405：需要访问的资源被禁止
• 407：访问的资源需要代理身份验证
• 414：请求的URL太长
• 500：服务器内部错误

---

在 onreadystatechange 事件中，当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且status状态为 200 时，表示响应已就绪。

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

4、服务器响应

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

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

1、responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性，responseText返回字符串形式的响应。

document.getElementById("h1").innerHTML=xhr.responseText;

2、responseXML属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，则使用 responseXML 属性。

xmltxt=xmlhttp.responseXML;
txt="";
//获取带有指定标签名的对象的集合
let x=xmltxt.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
	txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("h1").innerHTML=txt;

---

一个简单的概述，大致内容就是这么多了，如有补充，欢迎读者下面补充。