前言:之前学习.net的时候就听过一些AJAX的理论内容,这次通过对于AJAX的实践,对于AJAX有了更进一步的了解,上一篇博客和大家分享了和AJAX相关的内容,下面和大家分析一些AJAX的内容。
(一)AJAX
1、名词解释
(1)同步
在一段时间内,只能做一个事情
同步访问:在访问服务器时,客户端只能等待服务器的响应,不能做其它事情。用户体验非常的差
代表场合:
1、输入网址访问页面
2、a标记的默认跳转
3、submit按钮的表单提交
(2)异步
在一段时间内,可以同时干多个事情
异步访问:在向服务器发送请求时,不耽误用户在网页上做其它的操作
代表场合:
1、用户名的重复性验证
2、聊天室
3、股票走势图
4、搜索建议(百度,京东,淘宝 的搜索框)
(3)什么是AJAX
Asynchronous Javascript And Xml
异步的 JS 和 Xml
本质:使用 JS 提供的 XMLHttpRequest 对象 异步的向服务器发送请求,并接受响应数据(格式是 xml(已过时))
AJAX中,服务器响应回来的是部分的数据而不是完整的页面,并且可以以无刷新的效果来更改页面中的局部内容
2、获取 AJAX核心对象 - XMLHttpRequest
标准创建:var xhr=new XMLHttpRequest();
IE8以下 :
var xhr=new ActiveXObject("Microsoft.XMLHttp");
允许通过 window.XMLHttpRequest 判断浏览器是否支持 XMLHttpRequest()。如果 window.XMLHttpRequest的值是null的话,说明需要通过 ActiveXObject()创建,否则 需要通过 XMLHttpRequest() 来创建
var xhr;
//判断浏览器是否支持 XMLHttpRequest
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
//浏览器不支持 XMLHttpRequest
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
3、XHR 的常用属性 和 方法(难点)
(1)open() - 方法
作用:创建请求
语法:open(method,url,isAsyn)
1、method
string 类型
请求方式 :get,post,... ...
2、url
string 类型
请求地址
3、isAsyn
boolean 类型
指定采用同步(false)还是异步(true)的方式发送请求
(2)readyState - 属性
作用:表示 xhr 对象的 请求状态
值:由 0 - 4 表示 5个状态
0 : 请求尚未初始化
1 : 已经打开到WEB服务器的连接,正在向服务器发送请求
2 : 请求完成
3 : 正在接收服务器端的响应
4 : 接收响应数据成功
注意:当 readyState的值为4的时候,表示所有的响应都已经接收完毕。
(4)status - 属性
作用:服务器的响应状态码
值:
只记住一个即可 200
当 status 的值是 200的时候,表示服务器已经正确的给出所有的响应
(5)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;
}
}
(6)send() - 方法
作用:发送\提交请求
语法:send(body);
body : 是请求主体
没有请求主体的提交方式,body位置处,要写 null
有请求主体的提交方式,body位置处,编写的就是请求主体的数据
4、发送异步请求的步骤
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();
5、使用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"];
(二)JSON
1、使用 POST 方式发送请求
(1)提交的请求数据
提交的请求数据需要按照指定的格式拼好,放在 send() 中传递
xhr.send("name1=value1 & name2=value2");
(2)设置一个请求消息头
POST 提交方式,必须将 Content-Type 的请求消息头更改为 application/x-www-form-urlencoded
在发送请求之前:
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2、JSON
(1)什么是JSON
JavaScript Object Notation
JS 对象表示法,即以JS对象的方式来表现出来的字符串
(2)JS对象
var fbb = [];
fbb["yuwen"] = 121;
fbb["shuxue"] = 73;
fbb["yingyu"] = 116;
var fbb = {
yuwen:121,
shuxue:73,
yingyu:116
}
console.log(fbb.yunwen);
(3)、JSON语法:
1、用一对 {} 来表示一个对象
2、对象的属性名称,必须用 "" 引起来,值如果也是字符串,也必须用 "" 引起来
3、属性 与 值,用 : 连接
4、多对属性 与 值之间,用 , 分开
ex:
var ym = '{"height":175,"weight":50}';
(4)JSON数组
1、普通数组表现 :'["杨幂","范冰冰","凤姐"]'
2、对象的数组 :
'[
{
"height":170,
"weight":55,
"gender":"女"
},
{
"height":180,
"weight":60,
"gender":"女"
}
]'
(5)JSON文件
创建一个文件,以 ***.json 作为后缀
该文件中的数据必须是符合JSON格式的字符串
(6)将JSON字符串 转成 JS对象/数组
var p = '{"name":"sf.z","age":25}';
1、使用 eval()
var obj = eval("("+p+")");
2、使用JSON.parse() 来解析JSON字符串得到JS对象
var obj = JSON.parse(p);
(7)在Php中,可以直接将数组(一维,二维,关联) 转换成JSON格式的字符串
php中通过 : json_encode() 将数组转换为JSON字符串
语法:$str = json_encode($array);
注意:如果服务器端响应回来的数据时JSON格式的,需要增加响应消息头
header("Content-Type:application/json");
总结:AJAX对于用户真的是非常友好,同时学习AJAX又不仅仅是学习AJAX,还是对JSON,
HTML等内容的复习和综合应用,通过不断地学习,让学到的内容更加丰富。