一、Ajax概述
1.什么是同步,什么是异步
同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态(不能进行其他操作)
异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死(可以进行其他操作)
2.Ajax的运行原理
页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面功能。
二、js原生的Ajax技术
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原生的Ajax完成异步操作,有如下几个步骤:
1. 创建异步对象 var aiaxOb=new XMLHTTPRequest();
2. 设置请求的url等参数 open(请求的方式,请求的url,async默认异步)
3. 发送请求 send()
4. 注册事件 onreadystatechange 状态改变触发响应
5. 在注册的事件中获取返回值并在页面中显示(responseText)
Post请求步骤也如上,只不过要修改open()请求方式
详解:
1.XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
1.老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
var iable=new ActiveXObject("Microsoft.XMLHTTP");
兼容性写法:
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.XMLHttpRequest 对象用于和服务器交换数据。
向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
方法 |
描述 |
open(method,url,async) |
规定请求的类型、URL 以及是否异步处理请求。 · method:请求的类型;GET 或 POST · url:文件在服务器上的位置 · async:true(异步)或 false(同步) |
send(string) |
将请求发送到服务器。 · string:仅用于 POST 请求 |
3.服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 |
描述 |
responseText |
获得字符串形式的响应数据。 |
responseXML |
获得 XML 形式的响应数据。 |
responseText 属性
如果来自服务器的响应并非 XML,请使用 responseText 属性。
responseText 属性返回字符串形式的响应,因此您可以这样使用:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
4.onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
属性 |
描述 |
onreadystatechange |
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 · 0: 请求未初始化 · 1: 服务器连接已建立 · 2: 请求已接收 · 3: 请求处理中 · 4: 请求已完成,且响应已就绪 |
status |
200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
var iable=new ActiveXObject("Microsoft.XMLHTTP");
兼容性写法:
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="#" > <label for="name">姓名:</label><input type="text" name="username" id="name"><span id="reg"></span> <br> <label for="email">邮箱:</label><input type="email" name="email" id="email"> <br> <input type="submit" value="提交"> </form> </body> <script> //document.getElementsByName("name属性所对应的值") var user = document.getElementsByName("username")[0]; user.onblur = function () { // alert(this.value);//获取当前的输入值 var url = './04.php?username=' + this.value; var reg = document.getElementById("reg"); //1.创建ajax对象 var ajaxobg = new XMLHttpRequest(); //2.打开请求的方式及路径数据 ajaxobg.open('get',url,true); //3.发送数据 get请求为空,send()发送数据只为post发送请求数据 ajaxobg.send(null); //4.响应事件 ajaxobg.onreadystatechange = function () { //5.通过响应的状态来确定是否响应成功 if(this.readyState==4 && this.status==200){ if(this.responseText==0){ reg.innerHTML = '<span color="green">可用</span>'; }else { reg.innerHTML = '<span color="green">已被占用</span>'; } }else { alert("响应未成功!") } } } </script> </html>