JQuery中Ajax的操作
一.AJAX简介
1.定义:异步 JavaScript 及 XML(Asynchronous JavaScript And XML)。它是一系列交互式网页应用技术的结合体,包含知识有:
1)基于XHTML和CSS标准的表示;
2)使用Document Object Model(DOM)进行动态显示和交互;
3)使用XMLHttpRequest与服务器进行异步通信;
4)使用JavaScript绑定一切
2.AJAX 是一种用于创建快速动态网页的技术。
3. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新;而传统的网 页 (不 使 用 AJAX)如果需要更新内容,必需重载整个网页面。
二.XMLHttpRequest:是AJAX的核心对象,用于实现发送和接收HTTP请求与响应信息。
1.open(method,uri,async,[username],[password)):建立到服务器的新请求。
metod:请求方式,get,post,put,delete或head
uri:请求的服务器地址
async:设置异步或同步,true(默认)/false
根据需要可传username和password给服务器进行用户验证
2.setRequestHeader(header,value):设置请求的头信息。当readyState属性值为1时,可以在调用open()方法后调用这个方法,否则将得到一个异常。
3.getResponseHeader():用于检索响应的头部值。当readyState属性值为3或4时时,才可以调用此方法,否则返回一个空字符串。此外还可以通过 getAllResponseHeaders() 方法获取所有的HttpResponse的头部信息。
4.send([data]):向服务器发送请求。若为POST请求,可通过参数data传递数据给服务器,若不传递参数可显示地调用send(null),等同于send()。
//设置表单传输的编码格式,若为POST传值,则要显示设置 req.setRequestHeader("Content-type","application/x-www-form-urlencoded"); |
application/x-www-form-urlencoded:标准的编码格式,数据被编码为名称/值对
5.readyState属性:提供当前HTML的就绪状态,有0-4个状态
0:未初始化状态,创建了XMLHttpRequest对象,但未初始化。
1:准备发送状态,调用了XMLHttpRequest对象的open()方法,并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端。
2:已发送状态,已经通过send()方法把一个请求发送到服务器端,但还没有收到一个响应。
3:正在接收状态,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收到。
4:完成响应状态,已经完成了HttpResponse响应的接收。
6.status属性:返回HTTP状态代码,如200,404。readyState属性值为3或4时才可用。
7.statusText属性:返回HTTP状态代码对应的文本,如200->ok、404->Not Found。readyState属性值为3或4时才可用。
8.abort():退出当前请求
9.responseText属性:获得字符串形式的响应数据,当readyState属性值为4时,该属性才包含完整的响应信息。
10.responseXML属性:获得 XML 形式的响应数据,当readyState属性值为4,且响应头部的Content-Type的MIME类型被指定为XML(text/xml或application/xml)时,该属性才有值并且被解析为一个XML文档,否则该属性值为null。如果返回的XML文档结构不良或未完成响应回传,该属性值也会为null。
11.onreadystatechange:每当readyState属性值发生改变时,就会触发onreadychange事件。一般都通过该事件来触发回传处理函数。
三、操作步骤
1.创建XMLHttpRequest对象
function getXmlHttp() { var xmlHttp; //检查浏览器是否支持XMLHttpRequest对象 if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlHttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlHttp ; } |
2. 初始化HTTP请求参数(定义open方法)
3. 发送请求(调用send方法)
4.设置回调函数
判断readyState是否为4以及status是否为200,然后通过responseText或responseXML获取服务器返回的数据。
if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("result").innerHTML = xmlHttp.responseText ; } |
四、案例
1.HelloWorld
2.数据查询
3.XML
4.用户注册
五、Jquery中Ajax操作
1.$.load()
加载HTML内容
$("#content").load("loaded.html") ;
筛选加载HTML内容
$("#content").load("loaded.html #s") ;
传递参数(get)
$("#content").load("getDate.jsp?num=2&t="+Math.random()) ;
5.传递参数(post)
$("#content").load("getDate.jsp #n",{num:3}) ;
6.回调函数
function(data) {}
1)date返回的是HTML文档
alert(date) ;
2) 可以把以上的HTML文档转换为JQuery对象,然后访问html文档中的某部分内容,但要注意以下两点:
A、html文档中根据结点使用filter方法获取
B、html文档中子结点使用find方法获取
7.回调函数的三个参数
function(responseText,textStatus,XMLHttpRequest) {}
responseText:同上面的data,请求返回的内容
textStatus:请求的状态,如success,error,timeout等
XMLHttpRequest:XMLHttpRequest对象
2.$.get()/$.post()
$.get(url, [data], [callback], [type])
$.post(url, [data], [callback], [type])
其中,callback回调函数有两个参数(请求成功后[success]才会触发此函数)
function(data,textStatus) { }
data:返回的内容,可以是XML,JSON,HTML等
textStatus:请求状态,包括有success,error,timeout,notmodified等
3.$.ajax()
4.$.ajaxSetup():设置全局 AJAX 默认选项
5.$.parseJSON():接受一个JSON字符串,返回解析后的对象。类似于eval()函数
6.$.getScript/$.getJSON()
$.getScript():通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
$.getJSON():通过 HTTP GET 请求载入 JSON 数据。
回调函数:成功载入json文件或json数据后触发该函数,可使用$.each()方法遍历对象和数组(查看API)。语法:
$.each(“数组或对象”,回调函数(对象的成员或数组的索引,变量或内容){ })
退出each循环:return false ;
7.全局函数
六.JQuery中的AJAX相关工具函数
1.Serialize()
2.serializeArra()
3.$.param()
七、JSON
1.概念:
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式
JSON 独立于语言
JSON 具有自我描述性,更易理解
JSON 是存储和交换文本信息的语法。类似 XML,但JSON 比 XML 更小、更快,更易解析。
emp.json
{ "employees": [ { "firstName":"Bill" , "lastName":"Gates" }, { "firstName":"George" , "lastName":"Bush" }, { "firstName":"Thomas" , "lastName":"Carter" } ] } |
emp.xml
<employees> <employee> <firstName>Bill</firstName> <lastName>Gates</lastName> </employee>
<employee> <firstName>George</firstName> <lastName>Bush</lastName> </employee>
<employee> <firstName>Thomas</firstName> <lastName>Carter</lastName> </employee> </employees> |
2.比较XML
没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字
3.JSON的语法:JSON 语法是 JavaScript 对象表示法语法的子集。
数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
4.JSON 值
JSON 值可以是:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true 或 false)
数组(在方括号中)
对象(在花括号中)
null
5.JSON 文件
JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"
6.案例
1) 创建包含 JSON 语法的 JavaScript 字符串
var txt = '{ "employees" : [' + '{ "firstName":"Bill" , "lastName":"Gates" },' + '{ "firstName":"George" , "lastName":"Bush" },' + '{ "firstName":"Thomas" , "lastName":"Carter" } ]}'; |
2) 将 JSON 文本转换为 JavaScript 对象var obj = eval ("(" + txt + ")");
注:eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误
3) 在网页中使用 JavaScript 对象
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName