AJAX的作用
不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据
AJAX是什么
AJAX = Asynchronous JavaScript And XML.
AJAX是一种从网页访问Web服务器的技术;
代表了异步JavaScript和XML;
AJAX如何工作
网页中发生一个事件(页面加载、按钮点击)
由JavaScript创建XMLHttpRequest对象
XMLHttpRequest对象向web服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由JavaScript读取响应
由JavaScript执行正确动作(比如更新页面)
AJAX实例解释
<!DOCTYPE html>
<html>
<body>
<div id='demo'>
<h2>更新这段文本</h2>
<button type='button' onclick='loadText()'>点击更新</button>
</div>
<script>
function loadText(){
var xhttp = new XMLHttpRqequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
document.getElementByld("demo").innerHTML =
this.responseText;
}
};
xhttp.open('GET',"../../..",true)
xhttp.send();
}
</script>
AJAX 的核心XMLHttpRequest对象
XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分,而不需要重新加载整个页面。
创建XMLHttpRequest对象
语法
variable = new XMLHttpRequest()
跨域访问
处于安全问题,现代游览器不允许跨域访问
因此尝试加载的网页和XML文件都必须位于相同服务器上
老版本的 Internet Explorer(IE5 和 IE6)
老版本的 Internet Explorer(IE5 和 IE6)不支持 XMLHttpRequest 对象。
为了对付 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象,亦或创建 ActiveXObject 对象
<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<p id="demo">让 AJAX 改变这段文本。</p>
<button type="button" onclick="loadDoc()">更改内容</button>
<script>
function loadDoc() {
var xhttp;
if (window.XMLHttpRequest) {
// 针对现代浏览器的代码
xhttp = new XMLHttpRequest();
} else {
// 针对 IE6、IE5 的代码
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//每当 readyState 发生变化时就会调用 onreadystatechange 函数,当 readyState 为 4,status 为 200 时,响应就绪
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/demo/js/ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
XMLHttpRequest 对象方法
方法 | 描述 |
new XMLHttpRequest() | 创建新的XMLHttpRequest对象 |
abort() | 取消当前请求 |
getAllResponseHeaders() | 返回头部信息 |
getResponseHeaders() | 返回特定头部信息 |
open(method,url,async,user,psw) | 规定请求
|
send() | 将请求发送到服务器,用于GET请求 |
send(string) | 将请求发送到服务器,用于POST请求 |
setRequestHeader() | 向要发送的报头添加标签/值对 |
XMLHttpRequest对象属性
属性 | 描述 |
onreadystatechange | 定义当readyState属性发生变化时被调用的函数 |
readyState | 保存XMLHttpRequest的状态
|
responseText | 以字符串返回响应的数据 |
responseXML | 已XML数据返回响应数据 |
status | 返回请求的状态号
|
statusText | 返回状态文本(比如 'OK' 或 'Not Found' ) |
AJAX请求
如需向服务器发送请求,使用XMLHttpRequest对象的open()和send()
xhttp.open('GET','....',true)
xhhtp.send()
方法 | 描述 |
open(method,url,adync) | 规定请求类型
|
send() | 向服务器发送请求GET |
send(string) | 向服务器发送请求给POST |
GET和POST区别
GET比POST更快简单
POST情况:
缓存文件不是选项(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 无大小限制)
发送用户输入(可包含未知字符),POST 比 GET 更强大更安全
异步--true还是false
如需异步发送请求,open()的async参数必须设置为true
通过异步发送,JavaScript 不必等待服务器响应,而是可以:
在等待服务器响应时执行其他脚本
当响应就绪时处理响应
同步请求
不推荐同步的 XMLHttpRequest (async = false),因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢,应用程序将挂起或停止。