从Ajax到JQuery Ajax学习


Posted in Javascript onFebruary 14, 2007

Ajax篇
XMLDocument和XMLHttpRequest对象
第一:创建XMLHttpRequest请求对象

function getXMLHttpRequest() { 
var xRequest=null; 
if(window.XMLHttpRequest) { 
xRequest=new XMLHttpRequest(); 
}else if(typeof ActiveXObject != "undefined"){ 
xRequest=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
return xRequest; 
}

或者:
var request=null; 
function createRequest() { 
try { 
request=new XMLHttpRequest(); //非Microsoft IE浏览器 
} catch (trymicrosoft) { //Microsoft IE 
try { 
request=new ActiveXObject(“Msxml2.XMLHTTP”); 
} catch (othermicrosoft) { 
try { 
request=new ActiveXObject(“Microsoft.XMLHTTP”); 
} catch (failed) { 
request=null; 
} 
} 
} 
if (request==null) 
alert(“Error creating request object!”); 
} 
[code] 
这个独立的创建XMLHttpRequest请求对象的函数就可以被调用了。 
注意:XMlHTTP对象不是W3C标准,因此在创建时要分别考虑不同浏览器环境的支持。 
XMLHTTP对象一共就6个方法8个属性,支持两种执行模式:同步和异步。 
XMLHTTP对象的属性和方法列表(来自IXMLHTTPRequest接口): 属性名 
类型 
描述 
onreadystatechange 
N/A 
指定当就绪状态发生改变时调用的事件处理函数,仅用于异步操作 
readyState 
Long 
异步操作的状态:未初始化(0),正在加载(1),已加载(2),交互(3),已完成(4) 
responseBody 
Variant 
将响应信息正文作为unsigned byte数组返回 
responseStream 
Variant 
将响应信息正文作为一个ADO Stream对象返回 
responseText 
String 
将响应信息正文作为一个文本字符串返回 
responseXML 
Object 
通过XMLDom将响应信息正文解析为XMLDocument对象 
status 
Long 
服务器返回的HTTP状态码 
statusText 
String 
服务器HTTP响应行状态 
方法名 
描述 
abort 
取消当前 HTTP 请求 
getAllResponseHeaders 
从响应信息中检索所有的首部字段 
getResponseHeader 
从响应信息正文中获得一个 HTTP 首部字段值 
open(method,url,boolAsync,bstrUser,bstrPassword) 
打开一个与 HTTP 服务器的连接 
send(varBody) 
向HTTP服务器发送请求。可包含正文。 
setRequestHeader(bstrHeader, bstrValue) 
设定一个请求的首部字段 
第二:向服务器发送请求 
通过XMLHttpRequest对象向服务器发送请求是非常简单,只需要给它传递一个服务器页面的URL,这个页面将生成数据。 
[code] 
function sendRequest(url,params,HttpMethod) { 
if(!HttpMethod){ 
HttpMethod="POST"; 
} 
var req=getXMLHttpRequest(); 
if(req){ 
req.open(HttpMethod,url,true); 
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
req.send(params); 
} 
}

通过以上代码对请求进行设置后,会立即将控制权返回给我们,与此同时网络和服务器则忙着执行它们自己的任务。
第三:使用回调函数监视请求
通过XMLHttpRequest对象我们向服务器发送了异步请求,那我们怎样才能知道请求已经完成了呢?因此处理异步通信的第二个部分是在代码中设置一个入口点,以便在调用结束的时候可以获取结果信息。这通常是通过分配一个回调函数来实现的。
回调函数非常适合用于大多数现代UI工具箱中的事件驱动的编程方法。
以下我们重写sendRequest()函数,如下:
var req=null; //声明一个全局变量 
function sendRequest(url,params,HttpMethod) { 
if(!HttpMethod){ 
HttpMethod="GET"; 
} 
req=getXMLHttpRequest(); 
if(req){ 
req.onreadystatechange=onReadyStateChange; //注意这就是onreadystatechange回调函数用来监视请求。具体是通过自定义的Javascript函数onReadyStateChange()来进行事件处理。 
req.open(HttpMethod,url,true); 
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
req.send(params); 
} 
}

以下的回调函数onReadyStateChange就是用来处理从服务器得到的响应信息。
view sourceprint?01 function onReadyStateChange(){
02 var data=null;
03 if (req.readyState==4){
04
05 if (req.status==200) {
06 data=req.responseText;
07 } else {
08 data="loading.....["+req.readState+"]";
09 }
10
11 }
12 .....在这可以做一些与此返回信息有关的操作,比如输出信息等。
13 }
上述代码中使用了XMLHttpRequest对象的responseText属性,以文本字符串的形式获取响应中的数据。对于简单的数据来说这是有用的。当我们需要服务器返回更大的结构化的数据集,就可以使用responseXML属性。如果已经将响应的MIME类型正确设置为text/xml,这个属性就会返回一个DOM文档,因此我们可以使用DOM的属性和函数(例如getElementById()和childNodes)来对它进行处理。
JQuery Ajax篇
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery 的底层 AJAX 实现。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。$.ajax() 只有一个选项参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。 参数名
类型
描述
url
String
(默认: 当前页地址) 发送请求的地址。
type
String
(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeout
Number
设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async
Boolean
(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend
Function
发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {
this; // the options for this ajax request
}
cache
Boolean
(默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete
Function
请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。
function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}
contentType
String
(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data
Object,
String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如:
{foo:["bar1", "bar2"]}转换为 '&foo=bar1&foo=bar2'。
dataType
String
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据HTTP 包 MIME 信息返回responseXML 或 responseText,并作为回调函数参数传递,可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
error
Function
(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown只有其中一个有值
this; // the options for this ajax request
}
global
Boolean
(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified
Boolean
(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData
Boolean
(默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
success
Function
请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}
这里Ajax事件里面的 this 都是指向Ajax请求的选项信息的。
jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。
如:设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。其示例代码:
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
serialize() 与 serializeArray()
serialize() : 序列表表格内容为字符串。
serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
以上JQuery Ajax的底层实现,我们一般很少用到,JQuery对jQuery.ajax()进行了封装,使我们能够更加简便的使用Ajax异步调用。
1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件,例如表单。
2. jQuery.get( url, [data], [callback] ) :使用GET方式来进行异步请求
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会作为QueryString附加到请求URL中。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
3. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
如果你设置了请求的格式为"json", 此时你没有设置Response回来的ContentType 为:Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。
4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。
url (String) : 待载入 JS 文件地址。
callback (Function) : (可选) 成功载入后回调函数。
jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。
这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件。
Javascript 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
JS Attribute属性操作详解
May 19 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
JAVASCRIPT对象及属性
Feb 13 #Javascript
js判断浏览器的比较全的代码
Feb 13 #Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 #Javascript
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 #Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 #Javascript
控制打印时页眉角的代码
Feb 08 #Javascript
如何用javascript去掉字符串里的所有空格
Feb 08 #Javascript
You might like
封装一个PDO数据库操作类代码
2009/09/09 PHP
教大家制作简单的php日历
2015/11/17 PHP
PHP7 新增常量
2021/03/09 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
学习node.js 断言的使用详解
2019/03/18 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python 3 判断2个字典相同
2019/08/06 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
文秘专业个人求职信
2013/12/22 职场文书
《童趣》教学反思
2014/02/19 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
力克胡哲观后感
2015/06/10 职场文书
大学生社会实践感想
2015/08/11 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书