什么是ajax
ajax(Asynchronous JavaScript And XML),是一种从网页访问Web服务器的技术,仅组合了浏览器内建的XMLHttpRequest对象(从web服务器请求数据)与JavaScript、HTML DOM(显示或使用数据)并非编程语言,通过ajax能够不刷新页面更新网页,在页面加载后从服务器请求/接收数据,在后台向服务器发送数据。
ajax应用程序可能使用XML来传输数据,当将数据作为纯文本或JSON文本传输也同样常见。Ajax允许通过场景后面的web服务器交换数据来异步更新网页,故可以不刷新整个页面去更新网页的部分。
ajax的工作原理
![](https://i-blog.csdnimg.cn/blog_migrate/28a73bda1a0d85cd51d7f0c92c321757.gif)
当页面发生了某个事件时(如点击按钮,页面加载)->由JavaScript创建XMLHttpRequest对象->XMLHttpRequest对象向web服务器发送请求->服务器处理该请求->服务器将响应发送回网页->由JavaScript读取响应->由JavaScript执行正确的动作(如更新页面)
ajax的核心
ajax的核心是XMLHttpRequest对象。所有现代浏览器(Chrome、IE7+、firefox、Safari、Opera)都支持XMLHttpRequest对象,
都有内建的 XMLHttpRequest 对象。
创建XMLHttpRuquest对象
现代浏览器创建XMLHttpRequest的语法
variable= new XMLHttpRequest();
老版本的IE(IE5、IE6)使用ActiveX对象
variable = new ActiveXObject("Microsoft.XMLHTTP");
对了应对所有浏览器,可检查浏览器是否支持XMLHttpRequest对象
var xhttp;
if (window.XMLHttpRequest) {
//用于现代浏览器
xhttp = new XMLHttpRequest();
} else {
// 用于老版本的IE浏览器(IE5 、IE6)
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRuquest对象方法
方法
|
描述
|
new XMLHttpRequest()
|
创建新的 XMLHttpRequest 对象
|
abort()
|
取消当前请求
|
getAllResponseHeaders()
|
返回头部信息
|
getResponseHeader()
|
返回特定的头部信息
|
open(method, url, async, user, psw)
|
规定请求
|
send()
|
将请求发送到服务器,用于 GET 请求
|
send(string)
|
将请求发送到服务器,用于 POST 请求
|
setRequestHeader()
|
向要发送的报头添加标签/值对
|
向服务器发送请求
向服务器发送请求,我们使用XMLHttpRequest对象的open()和send()方法
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);(向URL添加一个唯一的ID避免获得一个缓存的结果)
xhttp.send();
使用GET还是POST
GET比POST更简单更快,适用于大多数情况,但在下述情况时请使用POST:
1.缓存文件不是选项(更新服务器上的文件或数据库)
2.向服务器发送大量数据(POST无大小限制)
3.发送用户输入(可包含未知字符),POST比GET更加强大安全。
XMLHttpRuquest对象属性
属性
|
描述
|
onreadystatechange
|
定义当 readyState 属性发生变化时被调用的函数
|
readyState
|
保存 XMLHttpRequest 的状态。
|
responseText
|
以字符串返回响应数据
|
responseXML
|
以 XML 数据返回响应数据
|
status
|
返回请求的状态号
如需完整列表请访问 Http 消息参考手册
|
statusText
|
返回状态文本(比如 "OK" 或 "Not Found")
|
每当readyState 发生变化时就会调用 onreadystatechange 函数, 当 readyState 为 4,status 为 200 时,响应就绪如:
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
POST 使用示例:
<body>
<div id='result'></div>
<script>
//获取元素的对象
const result = document.getElementById("result");
//绑定事件
result.addEventListener("mouseover",function(){
//创建对象
const xhr = new XMLHttpRequest();
// 初始化 设置类型与URL
xhr.open('POST','http://127.0.0.1:8000/server');
//设置请求头,第一个头的名字,第二个头的值
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//自定义,不是预定义的而是自定义的,浏览器会有安全的机制,需要加特殊的响应头
xhr.setRequestHeader('name','hhhhh')
// 发送
// xhr.send("a=100&b=200&c=300")
xhr.send();
// 事件绑定
xhr.onreadystatechange = function(){
// 判断
if(xhr.readyState ===4){
if(xhr.status >=200 && xhr.status < 300){
// 处理服务器端返回的结果
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>