创建异步对象
语法：var xhr = new XMLHttpRequest();
open设置请求行
语法：异步对象.open(请求方式，请求url);
例：xhr.open("get","validate.php?username="+name);
xhr.open("post","validate.php");
注：1.get请求如果有参数就需要在url后面拼接参数，
2.post如果有参数，就在请求体中传递
设置请求头
语法:异步对象.setRequestHeader('key':'value')
例： xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
注：1.get方式不需要设置请求头
2.post需要设置 Content-Type:application/x-www-form-urlencoded
3. 返回值为xml需要这样设置header("Content-Type:application/xml;charset=utf-8");
send设置请求体:发送请求
语法：异步对象.send(参数：key=value&key=value)
例：xhr.send("num="+arr);
注：1.如果有参数，post应该在这个位置来传递参数
2.对于 get请求不需要在这个位置来传递参数
响应报文
报文行：响应状态码 响应状态信息 200 ok
报文头：服务器返回给客户端的一些额外信息
报文体：服务器返回给客户端的数据
注：1.responseText:普通字符串。
2.responseXML：符合xml格式的字符串。
获得返回数据
语法1.异步对象.responseText //普通字符串。
2.异步对象.responseXML //符合xml格式的字符串。
status:获取当前服务器的响应状态
语法：异步对象.status
注：1. 如果返回值为200表示响应成功。
监听异步对象的响应状态 readyState
注：1. 0表示创建了异步对象，但是还没有真正的去发送请求
2. 1表示调用了send方法，正在发送请求
3. 2表示send方法执行完毕了，已经收到服务器的响应内容--原始内容，还不可以使用
4. 3表示正在解析数据
5. 4表示响应内容解析完毕，可以使用了
常见异步事件
1.onreadystatechange //表示异步对象发生改变
例：异步对象.onreadystatechange = function(){ }
ajax基本步骤
1.创建异步对象。 //var xhr = new XMLHttpRequest();
2.设置请求行。 // xhr.open("post", "demo02.php");
3.设置请求头。
//xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
4.设置请求体。 // xhr.send("num1=" + arr1 + '&' + "num2=" + arr2);
5.判断服务器响应是否完成
ajax的基本代码模式（get请求）：
var xhr = new XMLHttpRequest();
//url通常就是一个php文件，可以返回信息
var url = "server.php?name=jack&age=18&a=99&b=ccc";
xhr.open("get", url);
xhr.send(null);
xhr.onreadystatechange = function(){
if( xhr.status == 200 && xhr.readyState == 4){
var str = xhr.responseText; //获得返回的文本
}
}
ajax的基本代码模式（post请求）：
var xhr = new XMLHttpRequest();
//url通常就是一个php文件，可以返回信息
xhr.open("post", "server.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name=jack&age=18&a=99&b=ccc"); //send中带数据
xhr.onreadystatechange = function(){
if( xhr.status == 200 && xhr.readyState == 4){
var str = xhr.responseText; //获得返回的文本
}
}
获取json数据格式并处理的方式：
if( xhr.status == 200 && xhr.readyState == 4){
var str = xhr.responseText; //获得返回的文本（假设是json文本）
var obj = JSON.parse(str); //将json文本解释为json对象
}
获取xml数据格式并处理的方式：
//服务器端：
header("Content-Type: application/xml; charset=utf-8");
//客户端：
if( xhr.status == 200 && xhr.readyState == 4){
var xmlObj = xhr.responseXML; //获得返回xml文档
var obj1 = xmlObj.getElementById("dv");
var obj2 = xmlObj.querySelector("#dv2");
var items = xmlObj.querySelectorAll("item");
}
serialize()获取所有表单元素值
语法：$("form表单").serialize();
例：$("#ajaxForm").serialize();
注：1.这个方法是jq的方式，所以需要使用jq对象来调用
2.这个方法可以将表单中所有name属性的表单元素的值收集，生成 key=value&key=value...这种格式
获取当前文件的路径
语法：Location.href
jQuery中的Ajax
发起Ajax请求
语法：$.ajax({})
以GET方式发起Ajax请求
语法：$.get()
以POST方式发起Ajax请求
语法：$.post()
url接口地址
语法：url:'./server/nav-json.php',
type请求方式
语法：type:'post',
timeout请求超时
语法：timeout:3000,
注：1.设置请求超时:单位为毫秒，如果服务器的响应时间超过指定的时候，请求失败。
ontimeout 监听超时事件
语法：异步对象.ontimeout=function(e){ }
dataType服务器返回格式
语法：dataType:'json',
注：1.设置响应数据的格式 xml json text html script jsonp。
data发送请求数据
语法：data:{},
注1.请求需要传递的参数。
beforeSend:function () {}请求发起前调用
语法：beforeSend:function () {}
success成功响应后调用
语法： success:function(e){},
error错误响应时调用
语法：error:function(){ }
例： error:function(e){
if(e.statusText == "timeout"){
alert("请求超时，请重试");
}
},
complete 响应完成时调用（包括成功和失败）
语法：complete:function(){ }
例：complete:function(){
console.log('实现一些全局成员的释放，或者页面状态的重置....');
}
jQuery Ajax介绍
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
art-Template模板引擎
1.创建html结构
语法：<script type="text/template" id="navtemp">结构<script>
2.引入插件
例：<script src="template-native.js"></script>
3.接收模板引擎的返回值
语法：template(模板id,数据(对象));
例：var html = template("navTemp",obj);
注：1.调用模板引擎中的函数，返回值为替换之后的动态结构
4.添加返回的数据到页面
模板引擎基本步骤
综合案例
跨域
设置跨域请求
1.header( 'Access-Control-Allow-Origin:*' );
注：1.*代表允许所有其他的域向当前的域发送ajax请求。
2.header( 'Access-Control-Allow-Origin:http://www.study.com');
注：1.代表允许指定域向当前的域发送ajax请求。
注：1.服务器端设置。
XMLHttpRequest2.0
设置超时 xhr.timeout
监听超时事件 xhr.ontimeout = function () {// code}
FormData收集表单数据
实例化：var formdata=new FormData(form表单对象)
监听文件上传进度
语法：xhr.upload.onprogress = function (ev) {// code}
注：1.监听必须在send之前来设置。
2.ev.loaded 表示已上传的大小，ev.total表示文件整体的大小
|
|
收藏
淘帖
踩
