初识Ajax

Ajax是什么

Ajax即Asynchronous Javascript And XML(异步javascript和XML),是一种用于创建快速动态网页的技术，可以与服务器交互数据并更新部分网页；

XMLHTTPRequest对象（XHR）与服务器实现数据交换

兼容ie5/6

var xmlhttp;
if (window.XMLHttpRequest)
{//适用于IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
//创建 XMLHttpRequest 对象
}
else
{//兼容IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
//创建 XMLHttpRequest 对象
}
xmlhttp.onreadystatechange=function()
//在readystatechange属性发生变化的时候触发事件
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
//readyState==4请求已完成&&status==200请求成功
{可以去实现自己需要的功能}
}
xmlhttp.open("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

XHR发送请求

xmlhttp.open(method,url,async);

//method值为get/post

//async请求同步或异步，true/false

xmlhttp.send();

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
//get方法发送。send里不加参数

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//添加http头，头名称-头的值
xmlhttp.send("fname=Bill&lname=Gates");
//post方法发送，send(strind)

获取服务器响应

responseText:获取字符串形式的响应数据；

responseXML：获取XML形式的相应数据；

status/statusText：以数字/文本形式返回HTTP状态码；

getAllResponseHeader()：获取所有的响应头部，传参；

getResponseHeader()：获取响应中某个字段的值；

readyState属性

0 请求初始化，open还没被调用

1 服务器连接已经建立，open已经调用了

2 请求已接收，也就是接收到响应头部

3 请求处理中，也就是接收到响应主体

4 请求已完成，且响应就绪，即响应完成

json

json全称javascript object notation(js对象表示法)，是一种轻量级的存储和传输数据的格式，通常用于从服务器端向网页传递数据；

json是javascript语言，独立于语言和平台，但是json格式仅仅是一个文本，可以被任何编程语言解析，目前 .jsp .php .net都支持json，前提是要按json规则来；

json对比XML

json的长度比xml短小，网络传输中减少带宽；

json读写速度快；

json可以使用js内建的方法eval()直接进行解析，转换成js对象，很方便；

json数据书写格式：名称/值对；（”名称”:”值对”）

json值可以是：数字，字符串，逻辑值(true/false)，数组(在[方括号]中)，对象(在{花括号}中)，null(没有值)；

解析json的方法

eval()/JSON.parse()

使用eval是危险的，因为eval()函数可以编译任何的js代码，用它执行第三方的json数据如果里面包含恶意代码被eval执行，可能导致不好的结果，除非eval的参数是可控的，否则不要用eval;

尽量使用JSON.parse()解析字符串本身，该方法捕捉json中的语法错误；（JSON解析器只能JSON文本，而不会编译脚本，而且JSON解析器的速度更快）

//在浏览器控制台运行查看两种方式
var jsondata = '{
"staff":[
{"name":"yang","age":"54"},
{"name":"yang2","age":"52"},
{"name":"yang1","age":"51"}
]
}';
var jsonobj = eval('(' + jsondata + ')');
//使用eval（两选一）
var jsonobj = JSON.parse(jsondata);
//使用JSON.parse（两选一）
alert(jsonobj.staff[0].name)

**json在线校验工具：JSONlint**

<script>
var txt = '{
"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }
]
}';//创建包含JSON语法的js字符串;
var obj = eval ("(" + txt + ")");
//使用eval()方法解析字符串
var obj = JSON.parse(txt);
//使用JSON.prase()方法解析字符串
document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>

Jquery Ajax

$.ajax({name:value,name:value,name:value,...})

常用的名称/值对

async 布尔值，表示请求是异步处理，默认为true，一般不用设置

type 规定请求的类型（GET/POST），默认为GET

data 规定要发送到服务器的数据

url 规定发送请求url,默认是当前页

success(result,status,xhr) 当请求成功时运行的函数

error(xhr,status,error) 请求失败时运行的函数

complete(xhr,status) 不论请求成功失败，只要请求完成便可调用函数

dataType 预期的服务器响应的数据类型

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
//使用百度静态资源库里的jquery,使用了cdn加速
<script>
$(document).ready(function(){
$(id).click(function(){
$.ajax({
type:"GET",
url:"url",
dataType:"json",
success:function(data){
if(data.success){
... ...
}else{
... ...
}
},
error:function(xhr){
alert("发生错误"+xhr.status)
}
})//GET方法
$.ajax({
type:"POST",
url:"url?number="+$("").val(),
dataType:"json",
data:{
name:$("").val(),
ages:$("").val()
},
//POST传输数据方法；
success:function(data){
if(data.success){
... ...
}else{
... ...
}
},
error:function(xhr){
alert("发生错误"+xhr.status)
}
})//POST方法
})
})
//在DOM加载完成之后，在页面内容加载之前执行
</script>