AJAX
-
名词解释
1、同步
在一段时间内,只能做一件事情
同步访问:在访问服务器时,客户端只能等待服务器的响应,不能做其他事情,用户体验非常差
代表场合:
1、输入网址访问页面
2、a标记的默认跳转
3、submit按钮的表单提交
2、异步
在一段时间内,能同时做多件事情。
异步访问:在向服务器发送请求时,不耽误用户在网页上做其他的操作
代表场合:
1、用户名的重复验证
2、聊天室
3、股票走势图
4、搜索建议(百度、京东、淘宝的搜索框) -
什么是AJAX
Asynchronous Javascript And Xml
异步的 JS 和 xml
本质:使用JS提供的XMLHttpRequest对象异步的向服务器发送请求,并接受响应数据(格式是xml(已过时))
AJAX中服务器响应回来的是部分的数据,而不是完整的页面,并且 可以以无刷新的效果来更改页面中的局部内容
- 获取AJAX核心对象 – XMLHttpRequest
标准创建:var xhr=new XMLHttpRequest();
IE8 以下:
var xhr=new
ActiveXObject(“Microsoft.XMLHttp”);
允许通过window.XMLHttpRequest 判断浏览器是否支持XMLHttpRequest( ),如果window.XMLHttpRequest的值是null的话,说明需要通过ActiveXObject()创建,否则需要通过XMLHttpRequest()来创建。
ex:
var xhr;
//判断浏览器是否支持XMLHttpReaquest
if (window.XMLHttpRequest){
xhr=new XMLHttpRequest( );
}else{
//浏览器不支持XMLHttpRequest
xhr=new ActiveXObject(“Microsoft.XMLHttp”);
}
- XHR的 属性 和 方法
-
1、open( ) – 方法
作用:创建请求 语法:open(method ,url , isAsyn ) 1、method : 字符串类型 请求方式: get post 2、URL :字符串类型 请求地址 3、isAsyn : Boolean 类型 指定采用同步(false)还是异步(true)的方式发送请求
-
2、readyState – 属性
作用:表示xhr对象的请求状态 值: 由 0 — 4 :表示 5个状态 0:请求尚未初始化 1:已经打开到web服务器的连接,正在向服务器发送请求 2:请求完成 3:正在接收服务器端的响应 4:表示接收响应数据成功 注意:当readyState的值为4的时候,表示所有的响应都已经接收完毕。
-
3、status – 属性
作用:服务器的响应状态码 值: 200 当status的值是200的时候,表示服务器已经正确的给出所有的响应
-
4、onreadystatechange - 事件
作用:当xhr的readyState属性值发生改变的时候,要自动激发的操作。 语法: xhr.onreadystatechange = function( ){ //每当xhr.readyState的值,发生变化时,要执行的操作 //判断xhr.readyState 为4的时候并且xhr.status为200的时候,才能获取正常的响应数据 if(xhr.readyState == 4 && xhr.status ==200){ //可以接收响应回来的数据 //responseText 属性,表示服务器响应回来的文本 var resText=xhr.responseText;
}
}
-
5、send() - 方法
作用:发送/提交请求 语法:send( body); body : 是请求主体 没有请求主体的提交方式,body位置 处,要写null 由请求主体的提交方式,body位置处,编写的就是请求主体的数据
-
发送异步请求的步骤
1、创建/获取xhr的对象 2、创建请求: xhr.open() 3、设置xhr的 onreadystatechange 事件 判断readyState 以及 status的值,并接受响应 xhr.onreadystatechange=function(){ if(xhr.readyState == 4 && xhr.status ==200){ xhr.responseText; } } 4、发送请求: xhr.send() 练习: 创建一个页面06-ajax-ex.html,创建一个按钮,点击按钮时,向06-ajax-ex.php 异步的发送一个请求,并将 响应 的数据(欢迎光临) 显示在页面的一个div 6、使用GET提交方式,发送请求数据 在请求地址后,拼接请求参数(查询字符串) …. xhr.open("get","xx.php?name=value&name1=value1",true); …. ex: xhr.open("get","check.php?uname=zs&upwd=123",true); 在check.php中如何获取uname 和upwd 的值? $uname=$_REQUEST["uname"]; $upwd=$_REQUEST["upwd"];