不建议直接搬用本文代码，因为很有可能出现跨域问题

AJAX是什么

AJAX - Asynchronous JavaScript And XML - 异步的JavaScript和XML

该方法能够让Web浏览器在不刷新页面的情况下与服务器交换数据。

当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

XMLHttpRequest

XMLHttpRequest()用于和服务器交换数据。

发送一个HTTP请求时，需要创建一个XMLHttpRequest对象，打开一个URL，发送请求。服务器会返回HTTP状态码及响应主体。

1
var NewHTTPRequest = new XMLHTTPRequest();

这样就创建了一个XMLHttpRequest对象。（废话

值得一提的是，IE6及以前版本的IE用的都是ActiveXObject。0202年了，还有人用IE6吗？

发送请求

使用XMLHttpRequest对象的open()和send()方法。

1
2
NewHTTPRequest.open("GET","https://kawashiro_ryofu.gitee.io/blogimagerc/index.html",true)
NewHTTPRequest.send();

open()方法

语法：XMLHttpRequestObject.open(method, url, async, user, passwd);

  • XMLHttpRequestObject: 创建的XMLHttpRequest对象
  • method: 要使用的HTTP方法。常用的是GET和POST
  • url: 要向其发送请求的URL
  • async: 可选参数。布尔类型。表示是否异步操作，默认为true。如果为false，send()方法直到收到答复前不会返回
  • user: 可选参数。用于认证用途，用户名
  • passwd: 可选参数。用于认证用途，密码

send()方法

语法：XMLHttpRequestObject.send(body);

  • body: 可选参数。在XMLHttpRequest请求中要发送的数据体，默认为null。仅用于POST请求

GET还是POST

一言蔽之，GET适用于大多数请求。

而以下情况：

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

GET

1
2
NewHTTPRequest.open("GET","https://kawashiro_ryofu.gitee.io/blogimagerc/index.html",true);
NewHTTPRequest.send();

执行上面的例子，浏览器可能返回缓存的数据。

简单粗暴的解决方案：

1
2
NewHTTPRequest.open("GET","https://kawashiro_ryofu.gitee.io/blogimagerc/index.html?t=" + Math.random(),true);
NewHTTPRequest.send();

只需要向URL中添加一个无用的参数就可以了。

POST

1
2
3
NewHTTPRequest.open("POST","https://www.runoob.com/try/ajax/demo_post2.php" + Math.random(),true);
NewHTTPRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //向请求添加HTTP头
NewHTTPRequest.send("fname=河城&lname=荷取") //参数

setRequestHeader参数：

  • header: 规定HTTP头的名称
  • value: 规定头的值

异步还是同步

多数情况下，async应设置为true。但有时，async=false更合适。

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

  1. 在等待服务器响应时执行其他脚本
  2. 当响应就绪后对响应进行处理

    ——Runoob.com

服务器响应

接收服务器响应数据，应使用responseText或responseXML属性。二者的区别在于，前者默认获得文本数据，后者会解析XML。

responseText

1
console.log(NewHTTPRequest.responseText)

responseXML

什么时候推出一个“responseJson”啊

1
2
3
4
5
6
7
8
9
10

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

参考