Ajax

Ajax(Asynchronous JavaScript and XML)，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

使用XMLHttpRequest对象来进行Ajax交互，该对象是对JavaScript的一个扩展，可以使网页与服务器进行通信。

XMLHttpRequest

创建XMLHttpRequest对象

1	var xhr = new XMLHttpRequest();

常用的方法

open(method,url) 建立对服务器的调用。method可以是GET/POST/PUT
send(content) 向服务器发送请求
sendRequestHeader(header,value) 设置请求头
onreadystatechange 每个状态改变都会触发这个事件处理器
readyState 请求的状态，有5个取值 0->未初始化，1->正在加载，2->已经加载，3->交互中，4->完成
responseText 服务器的响应，表示为字符串
responseXML 服务器的响应，表示为XML
status 服务器的HTTP状态码
statusText HTTP状态码的相应文本

发送GET请求

var xhr = new XMLHttpRequest();
var url = "http://localhost:8080/test.html";
xhr.open("GET",url);
xhr.send();
xhr.onreadystatechange = function () {
  if(xhr.readyState == 4){
    if(xhr.status == 200){
      alert(xhr.responseText);
    }
  }
}

JS中使用JSON

// 直接创建json对象
var json = {
    "name":"张三"
}
alert(json.name);

如果为json字符串是无法进行直接解析的，可以使用eval来进行解析

1
2
3

var json1 = "{'name':'李四'}";

alert(eval("("+json1+")").name);

加上()是由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式转化为对象，而不是作为语句来执行。

jquery中使用ajax

load

load()方法是jquery中最为简单的ajax方法，能载入远程HTML代码并插入到DOM中

参数

url 地址
data(可选) 发送到服务器的数据
callback(可选) 请求完成时的回调函数

$(function(){
    var url = "http://localhost:8080/test.html";
      // 会直接将该html插入到#content元素中
    $("#content").load(url);
})

get或post

使用get或post方法时，需要自已编写回调函数来处理数据

var args = {"date":new Date()}
$.post(url,args,function (data) {
    var name = data.person.name;
},"JSON")