0%

Ajax

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请求

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
// 直接创建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(可选) 请求完成时的回调函数
1
2
3
4
5
$(function(){
var url = "http://localhost:8080/test.html";
// 会直接将该html插入到#content元素中
$("#content").load(url);
})

get或post

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

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