原生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=xhr.responseText;

4~6步就是接收服务器端响应数据的步骤:

* 使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态

* 使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(4--响应完毕)

* 使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200--表示请求成功)

* 使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据

demo:(这里省份也可以放在服务器端,通过 window.onload=function(){}在页面加载完后请求服务器关于省份的信息,方法步骤按照上面的4大步写就行)

原生ajax异步请求基础知识

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax02_二级联动</title>
</head>
<body>
<form>
<select id="province">
<option>请选择</option>
</select>
<select id="city">
<option>请选择</option>
</select>
</form>
<script>
var se_province=document.getElementById("province");
var Pro_city=document.getElementById("city");
//加载页面后显示省份列表内容
window.onload=function(){
var option=province.getElementsByTagName("option");
var arrayProvice=["北京市","广东省","四川省","湖南省","云南省"];
for(var i=0 ;i<arrayProvice.length;i++)
{ //新建option标签
var option=document.createElement("option");
//把数组内容放入option里面
var textNode=document.createTextNode(arrayProvice[i]);
option.appendChild(textNode);
//给select标签添加option
se_province.appendChild(option);
}
} se_province.onchange=function(){
//先为city元素的option文本内容情况,防止在多次触发onchange事件时出现城市列表重复添加
var opts=Pro_city.getElementsByTagName("option");
//console.log(opts);
for(var j=opts.length-1;j>0;j--)
{
Pro_city.removeChild(opts[j]);
}
//alert(se_province.value); //判断:如果省份value值是请选择就不会向服务器发送请求,避免生成多余的option标签
if(se_province.value !="请选择"){
//执行ajax异步请求
var xhr=getXhr();
xhr.open("post","ajax02.php",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("provcince="+se_province.value);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200)
//接收服务器端的数据内容
var data=xhr.responseText;//这里data是字符串
var citydata=data.split(",");//截断字符串变成数组
//console.log(data); for(var i=0;i<citydata.length;i++){
//新建option标签
var option=document.createElement("option");
//把数组内容放入option里面
var textNode=document.createTextNode(citydata[i]);
option.appendChild(textNode);
//给select标签添加option
Pro_city.appendChild(option); }
}
} } //创建XMLHTTPRequest对象, XMLHttpRequest 用于在后台与服务器交换数据
function getXhr(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
</script>
</body>
</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:转载请注明出处!>

上一篇:我的Android进阶之旅------>Android拍照小例子


下一篇:初识java——运算符和表达式以及注释