从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 相关文章推荐
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
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
利用PHP动态生成VRML网页
2006/10/09 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
php中上传文件的的解决方案
2018/09/25 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
Python3字符串学习教程
2015/08/20 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python装饰器简单用法实例小结
2018/12/03 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python实现合并两个排序的链表
2019/03/03 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
给领导的检讨书
2014/02/16 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
植物园观后感
2015/06/11 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书