jQuery之ajax技术的详细介绍

1:Ajax技术包含以下几点:
基于Web标准(XHTML + CSS)的展示
使用DOM进行动态显示和交互
使用XMLHttpRequest进行数据交换和相关操作
使用javascript将所有内容绑定在一起
Ajax的核心是JavaScript的XMLHttpRequest对象,它是一种支持异步请求的技术。简而言之,使用JS可以控制XMLHttpRequest对象向服务器提出请求并处理响应,
而不影响用户对页面的正常访问。对于XMLHttpRequest对象,不同的浏览器提供了不同的支持,IE是将其作为ActiveX控件集成到浏览器中的,而其他主流的浏览器直接
作为一般的JS对象来创建。

2:JS中的Ajax

XMLHttpRequest对象的属性及简要说明

名称

 

说明

 

readyState

 

通信的状态,当XMLHttpRequest对象把一个HTTP请求发送到服务器,到接收到服务器响应信息,整个过程将经历5种状态,该属性取值为为0-4

 

onreadystatechange

 

设置回调事件处理程序,当readyState属性的值改变时,会激发此事件

 

responseText

 

服务器返回的text/html格式的文档

 

responseXML

 

服务器返回的text/xml格式的文档

 

status

 

描述了HTTP响应short类型的状态代码,100表示Continue, 101表示Switching protocols数据交换,200表示执行正常,404表示未找到页面,500表示内部程序错误

 

statusText

 

HTTP响应的状态代码对应的文本(OK, not found)

 

readyState属性代码

代码

 

说明

 

0

 

代表未初始化的状态。创建了一个XMLHttpRequest对象,尚未初始化

 

1

 

代表连接状态,已经调用了open方法,并且已经准备好发送请求

 

2

 

代表发送状态,已经调用了send方法发出请求,尚未得到响应结果

 

3

 

代表正在接收状态,已经接收了HTTP响应的头部信息,正在接收响应内容

 

4

 

代表已加载状态,此时响应内容已完全被接收

 

复制代码 代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax</title>
<script src="https://www.jb51.net/JS/ajax.js"></script>
<style type="text/css">
 body { padding:20px; }
 #browser{ border:solid 1px #666; width:500px; height:300px; overflow:auto; }
 #content{ width:500px; height:80px; margin:10px 0; }

</style>
</head>
<body>
<input type="button" value="Access" />
<br />
<textarea></textarea>
<div></div>
</body>
</html>


ajax.js的内容:

复制代码 代码如下:


var xmlRequest;
function CreateRequest()
{
 /* 创建XMLHttpRequest对象 */
 if(window.ActiveXObject)
 {
  return new ActiveXObject("Microsoft.XMLHTTP");
 }
 else if(window.XMLHttpRequest)
 {
  return new XMLHttpRequest();
 }
}
function ResponseHandler()
{
 if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
 {
  /* 如果通信成功,并且响应正常,执行以下操作 */

  var reqContent = xmlRequest.responseText;
  document.getElementById("browser").innerHTML = reqContent;
  document.getElementById("content").value = reqContent;
 }
}
function AjaxAccess()
{
 /* 异步请求百度首页 */

 xmlRequest = CreateRequest();  //创建XMLHttpRequest对象
 xmlRequest.onreadystatechange = ResponseHandler;  //设置回调函数
 xmlRequest.open("GET","http://www.baidu.com");  //初始化请求对象
 xmlRequest.send(null);   //发送请求信息

 /* 触发事件以后提示正在打开百度首页 */
 var brow = document.getElementById("browser");
 brow.innerHTML = "<h1>正在打开百度搜索</h1>";
}
window.onload = function()
{
 document.getElementById("Access").onclick = AjaxAccess;  //设置按扭单击事件
}


jQuery之ajax技术的详细介绍


3:jQuery中的Ajax
$.ajax(options)方法
options是以“键/值”对的形式设置的,用于设置Ajax请求的参数,如请求方式、请求URL、回调函数等。
常用属性如下:
url:
发送请求的地址
type:请求方式,GET和POST,默认为GET
timeout: 设置请求超时时间,该属性为数值型,单位为毫秒
data: 发送到服务器的数据,“键/值”对形式,该属性可以是对象或者字符串,如果是对象,则自动转换为字符串
dataType:  预期服务器返回的数据类型,该属性为字符串类型。可选值如下: xml、html:返回纯文本HTML信息,包含的标签(script标签或者style标签)会在
文本插入DOM的时候执行、 script:返回纯文本JS代码、json、jsonp、text
contentType: 发送信息至服务器时内容编码类型,该属性为字符串类型,默认值为"application/x-www-form-urlencoded",一般不用设置,因为默认值适合大多数应用场合
beforeSend: 请求发送前的事件,该属性为其设置事件处理程序,可用于发送前修改XMLHttpRequest的参数,如头信息。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdggxs.html