
Ajax
Ajax(Asynchronous JavaScript and XML),是指一种创建交互式、快速*态网动**页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
使用XMLHttpRequest对象来进行Ajax交互,该对象是对JavaScript的一个扩展,可以使网页与服务器进行通信。
XMLHttpRequest
创建XMLHttpRequest对象
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来进行解析
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")