AJAX
AJAX:Asynchronous JavaScript and XML 异步的JavaScript和XML
同步:一步步完成事
异步:同时完成几件事
AJAX是一种用来改善用户体验的技术,其实质是,使用XMLHttpRequest对象异步地向服务器发请求。
服务器返回部分数据,而不是一个完整的页面,以页面无刷新的效果更改页面中的局部内容。
核心:异步的JavaScript对象XMLHttpRequest(xhr)。
IE5.5,6:ActiveXObject(“Microsoft.XMLHttp”)
IE7,8,9,Chrome FireFox:new XMLHttpRequest()
判断浏览器是否支持XMLHttpRequest:
if(window.XMLHttpRequest){
//该浏览器支持XMLHttpRequest,可以直接new
}else{
//创建ActiveXObject("Microsoft.XMLHttp")
}
创建XMLHttpRequest对象:
function createxhr(){
var xhr=null;
if (window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
方法
- open(method,url,asyn)—–创建请求
method请求类型:get,post,delete
asyn:bool类型值,false同步,true异步 - send(body)—–发生请求,body是请求体
当请求方式为get的时候,body必须为null
当请求方式为post的时候,body为具体请求提交的数据
格式为:“key=value & key1=value1 &…” - setRequestHeader()—-指定请求消息头
当请求方式为post时,必须使用setRequestHeader重新设置请求消息头,否则请求数据获取不到。 - abort()——取消请求
- setAllResponseHeaders()—–获取响应消息头
- getRequestHeader()——–获取指定的响应消息头
属性
- onreadystatechange
当准备状态改变的时候,要调用的函数(回调函数)是谁 - readyState—-(本身在xhr上)
xhr的请求状态,请求状态必为以下5中状态之一
0:尚未初始化
1:初始化完成,正在发生请求
2:请求完成
3:正在接受响应数据
4:xhr数据接收(响应)成功 - states——–由服务器返回的状态码(本身在服务器上)
200:请求成功
404:资源未找到
500:服务器内部错误,如php代码写错了
注意:完整的判断xhr是否与服务器进行成功的请求响应必须是
xhr.readyState==4 && xhr.status==200;
- responseText——-服务器返回的文本
- responseXML——服务器返回的xml文本
发生异步请求的步骤
- 获取或创建AJAX对象:获取XMLHttpRequest对象
- 创建请求:调用xhr的open方法
- 设置回调函数:指定xhr的onreadystatechange事件
- 发生请求
例子:
<script>
//创建xhr
function createxhr(){
var xhr=null;
if (window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
function getServerText(){
//获取xhr
var xhr=createXhr();
//创建请求
xhr.open("get","server.php",true);
//设置回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status ==200){
var resText=xhr.responseText;
document.getElementById("showText").innerHTML=resText;
}
}
//发生请求
xhr.send(null);
}
</script>
<body>
<div id="showText"></div>
<a href="javascript:getServerText();">提交数据</a>
</body>
//server.php:
<?php
echo "<h1>hello world</h1>";
?>
请求提交方式
- get
http://url/aaa.php?name=abc&age=18&gender=male
php:$_REQUEST[“name”] - post
xhr.open(“post”,url,true);
xhr.send(“name=zs&age=18&gender=malse”);
表单提交数据的Content-Type请求消息头
<form enctype=""></foem>
取值:text/plain
- application/x-www-form-urlencoded—默认
- multipart/form-data——-提交的有文件时,如传头像
使用post时,要在get的基础上改:
<script>
//创建xhr
function createxhr(){
var xhr=null;
if (window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
function getServerText(){
//获取xhr
var xhr=createXhr();
//创建请求
var url="server.php";
xhr.open("post",url,true);//去掉url后的变量
//加上
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//设置回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status ==200){
var resText=xhr.responseText;
document.getElementById("showText").innerHTML=resText;
}
}
//改发生请求
xhr.send("name="+name+"&age="+age);
}
</script>
<body>
<div id="showText"></div>
<a href="javascript:getServerText();">提交数据</a>
</body>
//server.php:
<?php
echo "<h1>hello world</h1>";
?>
jQuery对AJAX的支持
- load():将服务器返回的文本添加到符合要求的节点上
用法:$obj.load(请求地址,请求参数);
请求参数:”username=tom & age=22”
或者 {‘username’:’tom’,’age’:’22’}
有请求参数时,load方法发生post请求,否则发生get请求 - get():发生get类型的请求
用法:$.get(请求地址,请求参数,回调函数,服务器返回的数据类型)
注:回调函数添加的参数是服务器返回的数据
服务器返回的数据类型:
html:HTML文本
text:文本
XML:XML文档
JSON:js对象
script:JavaScript脚本 - ajax():
用法:$.ajax({ });
{ }内的参数:
url—–请求地址 type:请求类型
data—–请求参数 dataType:服务器返回的数据类型
success:服务器处理正常对应的回调函数
error:服务器出错对应的回调函数
async:true(缺省),当值为false时,发生同步请求。
AJAX表单操作
使用AJAX提交数据:
- 获取表单元素通过document.getElementById或者jQuery的工厂函数获取页面元素值
- 将获取的页面元素值拼凑成字符串或者json字符串
- 使用AJAX异步提交表单
如:
一:获取表单元素:
loginname=$("#txtLoginName").val();
password=$("#txtLoginPwd").val();
hobbys=$("input[name=hobby]:checked");//获取多选项的值
gender=$("input[name=rdoGender]:checked").val();//获取单选项的值
二,拼凑字符串
var logininfo="loginname="+loginname+"&password="+password+"&gender="+gender;
for(var i=0;i<hobbys.length;i++){
logininfo+="&hobbys[]="+hobbys.get[i].value;
}
表单的序列化
序列化:将对象状态转换为可保持或传输的格式过程
表单序列化:将表单元素转换为可提交的字符串或者JSON字符串
通过序列化可以轻松的实现数据存储和传输
在jQuery中可以通过serialize()方法将表单元素序列化成普通字符串,通过serializeArray()方法将表单元素序列化成json字符串。
serialize()方法:
格式:var data=$("#formId").serialize();
功能:将表单内容序列化成一个字符串
serializeArray()方法:
格式:var jsonData=$("#formId").serializeArray();
功能:将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。
比如:[{"name":"WCM","age":"18"},{...}]
获取数据为jsonData[0].name
异步表单提交:
一:获取表单提交方式,服务器地址,序列化表单
二:通过AJAX异步的将内容提交给服务器
三:表单提交方法中返回false,即阻止表单默认提交。
使用jQuery.form异步提交表单(插件):
ajaxForm():不能提交表单。在ready函数中,使用ajaxForm来为AJAX提交表单进行准备
ajaxSubmit():马上由AJAX来提交表单。你可以在任何情况下进行该项提交。