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