什么是 Ajax
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图等等。
XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest方法
(1)open(请求方式, 服务器端的访问地址,异步还是同步)
(2)send(): 使用异步对象发送请求
XMLHttpRequest属性
-
readyState属性:请求的状态
0:表示创建异步对象时,new XMLHttpRequest();
1:表示初始异步对象的请求参数。 执行open()方法
2:使用send()方法发送请求。
3:使用异步对象从服务器接收了数据
4:异步对象接收了数据,并在异步对象内部处理完成后。 -
status属性:网络的状态,和Http的状态码对应
200:请求成功
404: 服务器资源没有找到
500: 服务器内部代码有错误 -
responseText属性:表示服务器端返回的数据
var data = xhr.responseText;
Ajax 请求的基本步骤
1、创建ajax核心对象XMLHttpRequest
2、注册回调函数
3、开启浏览器和服务器之间的通道
4、发送ajax请求
原生Ajax代码
<script type="text/javascript">
function checkName(username){
var xhr = null;
if(window.XMLHttpRequest){
/* 创建ajax核心对象XMLHttpRequest(浏览器内置的可以直接使用) */
xhr = new XMLHttpRequest();
}else{
/* IE5和IE6是不支持XMLHttpRequest对象的 它只支持ActiveXObject对象 */
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
/* 注册回调函数
xhr对象的readystate属性发生改变时会执行函数
XMLHttpRequest对象在请求和响应的过程中该对象的readyState状态从0-4
0:请求为初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:求情已完成且响应已就绪
*/
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){/* 200表示服务器正常响应 */
/* 处理服务器响应的数据 */
//var s = xhr.responseText;
document.getElementById("xxx").innerHTML=xmlhttp.responseText;
}else{
/* 这里写发生错误的处理代码
alter.status属性可以获取到http的响应状态码*/
alter(xhr.status);
}
}
/* 开启浏览器和服务器之间的通道
xhr.oprn(method,url,asyn);
method:指定请求方式是get还是post
url:请求路径
asyn:true表示支持异步,false表示支持同步
*/
xhr.open("GET","请求路径",true);
/* 发送ajax请求 */
xhr.send();
/*
xhr.open("POST","请求路径",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");//使用post请求这行代码必须有
xhr.send("username="+username+"&password="+password);//post请求数据在send方法中提交
*/
}
</script>
JQuery Ajax
语法:$.ajax({json格式的参数})
json格式的参数:key是定义好的,我们只需要给key赋值即可。json格式中常用的key:
- url:请求地址
- trpe:表示请求的方式get和post,默认是get(不区分大小写)
- data:表示请求的参数。可以是String,数组,json。推荐使用json
- dataType:希望服务器端返回的数据格式。如html,text,xml,json
- success:函数function 相当于xhr对象的readyStatus == 4 && status == 200的情况
- error:当请求发生错误时执行该函数
- async:true表示异步false表示同步,默认为true
$.ajax({
url:"",
type:"get",
data:{"name":"张三","age":"20"},
dataType:"json",
success:function(resp){获取数据更新dom对象代码},
error:function(){错误处理代码}
})
/*$.get()函数相当于执行get请求方式的ajax
$.get(url,请求参数,success函数,dataType)*/
/*$.post()函数相当于执行post请求方式的ajax
$.post(url,请求参数,success函数,dataType)*/