ajax使用步骤:
1.给后端发请求
2.服务端返回数据
3.根据服务端返回的数据,做相应的操作
首先,我们实例化一个XHR对象,代表我要使用AJAX技术。
var xhr = new XMLHttpRequest();
然后向服务器发送请求,以下是两种发送请求的方法(“GET"和"POST”)
xhr.open('GET', 'http://www.baidu.com', true)
xhr.open('POST', 'http://www.baidu.com', true)
如果你是用"POST"方法发送的请求的话,就必须向服务器发送一个叫“Content-Type”的请求头(Request Header) 用以指明请求数据的类型,除了Content-Type之外,它还可以向服务器发送其它一些Headers(请求头)。
比如:
//如果是向服务器发送的是json格式
xhr.setRequestHeader("Content-type","application/json");
//如果是发送的是urlencoded格式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
然后向服务器发送数据:
xhr.send();//如果你只是请求数据的话,括号里面就不用填写
然后你要了解XHR对象有3个重要的属性,分别是
1.onreadystatechange //此事件是在readyState属性发生改变时触发的,readyState属性每改变一次,此事件就会触发一次
2.readyState //此值为4的时候表示向服务器请求成功
3.status //此值为200的时候表示已经得到数据
xhr.onreadystatechange = function ()
{
if (xhr.readyState === 4)
{
if (xhr.status === 200)
{
//成功地时候做的事
alert(xhr.responseText);
}
else
{
//失败的时候做的事
alert('There was a problem with the request.');
}
}
}
然后我写一个完整的参考代码:
(function () {
var but = document.getElementById("ajaxButton");
but.addEventListener("click", makeRequest);
function makeRequest() {
httpRequest = new XMLHttpRequest();
if (!httpRequest) {
alert("创建请求失败");
}
httpRequest.open("GET", "test.json");//这里我是请求的本地的一个json文件
httpRequest.send();//没有向后端发送数据
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
var data = JSON.parse(httpRequest.responseText);
but.innerText = data.student.name;
}
else {
alert(There was a problem with the request.);
}
}
}
}
})();
补充:各个状态下readyState的值
<script>
var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// 初始化 请求代理对象
xhr.open('GET', 'time.php')
console.log(xhr.readyState)
// => 1
// open 方法已经调用,建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {
switch (this.readyState) {
case 2:
// => 2
// 已经接受到了响应报文的响应头
// 可以拿到头
console.log(this.getAllResponseHeaders())
// 但是还没有拿到体
console.log(this.responseText)
break;
case 3:
// => 3
// 正在下载响应报文的响应体,有可能响应体为空,也有可能不完整
// 在这里处理响应体不保险(不可靠)
console.log(this.responseText)
break;
case 4:
// => 4
//整个响应报文已经完整下载下来了
console.log(this.responseText)
break;
}
})
</script>
不懂的可以在下方留言,看到后会回复