一．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
扫一扫
955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
