首页 > 代码库 > 原生ajax异步请求基础知识
原生ajax异步请求基础知识
一、同步交互与异步交互的概念：
* 同步交互：客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求).
* 异步交互：客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做其他任何事情(不等)；
同步与异步的区别：
* 同步交互
1、执行速度相对比较慢
2、响应的是完整的HTML页面
* 异步交互
1、 执行速度相对比较快
2、 响应的是部分数据
二、AJAX的概念：（Asynchronous JavaScript and Xml）--直译中文 - javascript和XML的异步
（简单理解-->就是客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax）
* Ajax实现的是B/S架构下的异步交互
* 实现异步交互的技术-- <iframe src="">元素
* Ajax具有核心对象-- XMLHttpRequest对象
三、实现Ajax的步骤
* 创建XMLHttpRequest对象
* 注册监听
* 建立连接
* 发送请求
实现Ajax的六步是什么?(不标准)
* 创建XMLHttpRequest对象
* 建立连接
* 发送请求
* 注册监听 - onreadystatechange事件
* 获取服务器端的通信状态 - readyState
* 获取服务器端的状态码
1、创建XMLHttpRequest对象的语法：
function getXhr()
{
// 声明XMLHttpRequest对象
var xhr = null;
// 根据浏览器的不同情况进行创建
if(window.XMLHttpRequest)
{// 表示除IE外的其他浏览器
xhr = new XMLHttpRequest();
}else{ // 表示IE浏览器下创建
xhr = new ActiveXObject(‘Microsoft.XMLHttp‘);
}
return xhr;
}
// 调用getXhr()
var xhr = getXhr();
2、建立连接：
* 使用XMLHttpRequest对象的open(method,url)方法
* 作用 - 与服务器端建立连接
*参数含义：
* method - 设置当前请求的类型get/post
* url - 设置当前请求的地址
3、向服务器端发送请求：
*使用XMLHttpRequest对象的send(请求参数)方法：
* 请求参数的格式 - key=value
注意：* GET与POST的区别
* GET请求类型
* send()方法不起作用,但是不能被省略；语法：xhr.send(null);
* 请求参数 -在url后面写?key=value
* POST请求类型
* send()方法起作用,在send()方法被调用前,使用setRequestHeader()方法设置请求头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4、注册监听:
* onreadystatechange事件
* 作用 - 监听服务器端的通信状态改变
xhr.onreadystatechange=function()
{
}
5、获取服务器端的通信状态：
*使用核心对象属性readyState、status
* readyState - 表示当前服务器端的通信状态
* 0 - (服务器端)尚未初始化
* 1 - (服务器端)正在接收
* 2 - (服务器端)接收完毕
* 3 - (服务器端)正在响应
* 4 - (服务器端)响应完毕
* status --表示当前服务器端的状态码
* 200 - 请求成功
* 404 - 网页找不到(请求路径不正确)
* 500 - 服务器端错误
if(xhr.readyState==4&&xhr.status==200)
{
}
6、获取响应数据：
使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据；
var data=http://www.mamicode.com/xhr.responseText；
4~6步就是接收服务器端响应数据的步骤：
* 使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态
* 使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(4--响应完毕)
* 使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200--表示请求成功)
* 使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据
demo：（这里省份也可以放在服务器端，通过 window.onload=function(){}在页面加载完后请求服务器关于省份的信息，方法步骤按照上面的4大步写就行）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ajax02_二级联动</title> 6 </head> 7 <body> 8 <form> 9 <select id="province"> 10 <option>请选择</option> 11 </select> 12 <select id="city"> 13 <option>请选择</option> 14 </select> 15 </form> 16 <script> 17 var se_province=document.getElementById("province"); 18 var Pro_city=document.getElementById("city"); 19 //加载页面后显示省份列表内容 20 window.onload=function(){ 21 var option=province.getElementsByTagName("option"); 22 var arrayProvice=["北京市","广东省","四川省","湖南省","云南省"]; 23 for(var i=0 ;i<arrayProvice.length;i++) 24 { //新建option标签 25 var option=document.createElement("option"); 26 //把数组内容放入option里面 27 var textNode=document.createTextNode(arrayProvice[i]); 28 option.appendChild(textNode); 29 //给select标签添加option 30 se_province.appendChild(option); 31 } 32 } 33 34 se_province.onchange=function(){ 35 //先为city元素的option文本内容情况，防止在多次触发onchange事件时出现城市列表重复添加 36 var opts=Pro_city.getElementsByTagName("option"); 37 //console.log(opts); 38 for(var j=opts.length-1;j>0;j--) 39 { 40 Pro_city.removeChild(opts[j]); 41 } 42 //alert(se_province.value); 43 44 //判断：如果省份value值是请选择就不会向服务器发送请求，避免生成多余的option标签 45 if(se_province.value !="请选择"){ 46 //执行ajax异步请求 47 var xhr=getXhr(); 48 xhr.open("post","ajax02.php",true); 49 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); 50 xhr.send("provcince="+se_province.value); 51 xhr.onreadystatechange=function(){ 52 if(xhr.readyState==4&&xhr.status==200) 53 //接收服务器端的数据内容 54 var data=xhr.responseText;//这里data是字符串 55 var citydata=data.split(",");//截断字符串变成数组 56 //console.log(data); 57 58 for(var i=0;i<citydata.length;i++){ 59 //新建option标签 60 var option=document.createElement("option"); 61 //把数组内容放入option里面 62 var textNode=document.createTextNode(citydata[i]); 63 option.appendChild(textNode); 64 //给select标签添加option 65 Pro_city.appendChild(option); 66 67 } 68 } 69 } 70 71 } 72 73 //创建XMLHTTPRequest对象， XMLHttpRequest 用于在后台与服务器交换数据 74 function getXhr(){ 75 var xmlhttp; 76 if(window.XMLHttpRequest){ 77 xmlhttp=new XMLHttpRequest(); 78 }else{ 79 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 80 } 81 return xmlhttp; 82 } 83 </script> 84 </body> 85 </html>
ajax02.php文件代码：
<?php //接收客户端发送的省份信息 $province=$_POST["provcince"]; switch($province){ case "北京市":echo "朝阳区,海淀区,通州区,怀柔区"; break; case "广东省":echo "深圳市,东莞市,广州市,佛山市"; break; case "湖南省":echo "长沙市,湘潭市,邵阳市,岳阳市"; break; case "四川省":echo "成都市,南充市,绵阳市,广元市"; break; case "云南省":echo "昆明市,曲靖市,玉溪市,楚雄市"; break; } ?>
<PS:转载请注明出处！>
原生ajax异步请求基础知识