初识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>