什么是ajax？
- asynchronous javascript and xml,直译中文-javascript和xml的异步
- AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求
- 服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
- Ajax的核心对象
` XMLHttpRequerst对象`
- 获取XMLHttpRequest对象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//除IE外的其他浏览器
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
```
6. 属性
1) readyState 请求状态
0 尚未初始化
1正在发送请求
2请求完成
3请求成功，正在接受数据
4数据接收成功
2) status 请求响应值
200 表示请求成功
202 请求被接受但处理未完成
400 错误的请求
404 资源未找到
500 内部服务器错误，如asp代码错误等
3) responseText 服务器返回的文本
4) responseXML 服务器返回的xml，可以当做DOM处理
7. 方法
open(method,url) - 与服务端建立连接
send() - 向服务器端发送请求
abort() - 取消请求
getAllResponseHeaders()
得到响应的所有http头
getResponseHeader()
获取指定的http头
setRequestHeader()
指定请求的Http头
8. 事件
onreadystatechange事件
作用 - 监听服务端的通信状态改变
当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件
三、实现ajax的异步交互步骤
-
创建XMLHttpRequest核心对象
固定写法-独立编写 -
与服务区建立连接
使用XMLHttpRequest对象的open(method,url) -
向服务器发送请求
使用XMLRequest对象的send()方法
请求参数的格式 - key=value -
接受服务器响应的数据
使用XMLHttpRequest对象的readystatechange事件监听服务器端的通信状态
使用XMLHttpRequest对象的readyState属性，判断服务器端当前状态(0-4)
使用XMLHttpRequest对象的statue属性，判断服务器端的状态码(200)
使用XMLHttp对象的responseText属性，接受服务器端的响应数据
注意：get与post方式
get请求方式
send()方法不起作用，但是不能被省略
xhr.send(null) 请求参数，添加到url?key=value
post请求方式
必须要在send()方法调用之前，使用setRequestHeader()方法设置请求头，参数为key-value
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
实例：如图所示将在input框里面输入，然后将输入的文本提交到下面的div中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
div{
width:100px;
height:100px;
border: 1px solid black;
}
</style>
<body>
<input type="text" name="user" id="user" value="" /><br/>
<button id="tijiao">提交</button>
<div id="content">
</div>
<script type="text/javascript">
document.getElementById("tijiao").onclick=function () {
//将input中的内容异步提交到服务器，然后将服务器响应回来的数据放在div里面
//1.创建ajax对象
var xhr=getXhr();
//2.跟服务器建立连接, open还可以设置第三个boolean参数，可以设置同步还是异步交互，默认为true，为异步交互。现在ajax已经慢慢放弃弃用同步
//使用GET提交数据，需要将参数拼到url的后面，并且发送时设置发送内容为null
var input=document.getElementById("user");
xhr.open("GET","myphp01.php?username="+input.value);
//3.发送数据 格式为key=value，多个参数用&隔开
xhr.send(null);
//4.监听服务器的响应
xhr.onreadystatechange=function () {
//将响应的内容放在div里面
if(xhr.readyState==4&&xhr.status==200){//当数据接收完毕，以及请求成功时，做处理
document.getElementById("content").innerHTML=xhr.responseText;
}
}
//创建ajax对象
function getXhr () {
var xhr=null;//设置一个空变量
if(window.XMLHttpRequest){//判断是否支持XMLHttpRequest
xhr=new XMLHttpRequest();
}else{//ie不支持
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
}
</script>
</body>
</html>
网友评论