jQuery调用AJAX异步操作超清晰教程
JQUERY AJAX异步操作详细说明
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和XML)。它并非一种新的技术,而是以下几种原有技术的结合体。
1)使用CSS和XHTML来表示。
2)使用DOM模型来交互和动态显示。
3)使用XMLHttpRequest来和服务器进行异步通信。
4)使用javascript来绑定和调用。
通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型:
1)不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制
权马上就被返回到浏览器。界面不会出现白板,在得到服务器响应之前
还可以友好的给出一个加载提示。
2)不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数,待
服务器响应到达时,触发回调函数,并且传递所需的少量数据。“按需
取数据”也降低了服务器的压力。
3)不需要使用隐藏或内嵌的框架。在XHR对象之前,模拟Ajax通信通常
使用hack手段,如使用隐藏的或内嵌的框架(
下面介绍下AJAX中的重要对象:XMLHttpRequest。
XMLHttpRequest对象(XHR)
XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。
XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象,但是以一个本地JavaScript对象而不是作为一个ActiveX 对象实现。而如今,由于安全性、标准等问题,微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。
API描述
客服端请求
open(method,url,a sync, bstrUser, bstrPassword)规定请求的类型、URL 以及是否异步处理请求。
1)method:请求的类型,例如:POST、GET、PUT及PROPFIND。
大小写不敏感。
2)url:请求的URL地址,可以为绝对地址也可以为相对
地址。
3)async[可选]:true(默认,异步)或 false(同步)。
注释:当您使用async=false 时,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。此时,不需要编写onreadystatechange回调函数,把代码放到send() 语句后面即可。
4)bstrUser[可选]:如果服务器需要验证,此处指定用
户名,如果未指定,当服务器需要验证时,会弹出验证
窗口。
5)bstrPassword[可选]:验证信息中的密码部分,如果
用户名为空,则此值将被忽略。
getRequestHeader(
name)
获取指定的相应头部信息
setRequestHeader( name,value)自定义HTTP头部信息。需在open()方法之后和send()之前调用,才能成功发送请求头部信息。
传送门:HTTP 头部详解
Accept浏览器能够处理的媒体类型
Accept-Chars
et
浏览器申明自己接收的字符集
Accept-Encod
ing
浏览器申明自己接收的编码方法,通常
指定压缩方法,是否支持压缩,支持什
么压缩方法(gzip,deflate)
Host客户端指定要请求的WEB服务器的域
名/IP 地址和端口号
Referer发出请求的页面的URI
Content-Type标明发送或者接收的实体的MIME类
型。传送门:
1、HTTP Content-type对照表
2、格式:Content-Type:
[type]/[subtype]; parameter
X-Requested-
With
非标准HTTP头,只为firefox3标注是
否为ajax异步请求,null表示为同步
请求。
默认情况下,服务器对POST请求和提交Web表单不会一视同仁,将Content-Type头部信息设置为application/x-www-form-urlencoded (模拟表单提交)
send(string)将请求发送到服务器。参数string仅用于POST请求;对
于GET请求的参数写在url后面,所以string参数传递
null。
abort()调用此方法可取消异步请求,调用后,XHR对象停止触发事
件,不允许访问任何与响应相关的属性;
服务端响应
onreadystatechang e事件对于异步请求,如果需要对服务器获取和操作响应结果,则在send() 之前,需要为onreadystatechange属性指定处理方法。该函数用于对服务器响应进行处理。
readyState存有XMLHttpRequest的状态。每当readyState改变时,
就会触发onreadystatechange事件。
从 0 到 4 发生变化:
0(未初始化)对象已建立,但是尚未初始化(尚未
调用open方法)
1(初始化)对象已建立,尚未调用send方法
2(发送数据)send方法已调用,但是当前的状态及
http头未知
3(数据传送中)已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
4(完成)数据接收完毕,此时可以通过
responseXml和responseText获取完
整的回应数据
status(数字表示)返回当前请求的http状态码。
传送门:HTTP状态码一览表(HTTP Status Code)
1xx(临时响应)表示临时响应并需要请求者继续执
行操作的状态代码。
2xx (成功)表示成功处理了请求的状态代码。
Eg:200
3xx (重定向)表示要完成请求,需要进一步操作。
通常,这些状态代码用来重定向。
Eg:304
4xx(请求错误)这些状态代码表示请求可能出错,
导致服务器无法正常处理。Eg:404
5xx(服务器错误)这些状态代码表示服务器在尝试处
理请求时发生内部错误。这些错误
可能是服务器本身的错误,而不是
请求出错。Eg:500
statusText(字符表
示)
返回当前请求的状态文本eg:OK (status:200)responseText将响应信息作为字符串返回
responseXML将响应信息格式化为Xml Document对象并返回
responseBody(只有微软的IE支持)将响应信息正文以unsigned byte数组形式返回(二进制数据)
responseStream(只
有IE的某些版本支
持)
以Ado Stream对象(二进制流)的形式返回响应信息
getResponseHeader
(name)
从响应信息中获取指定的http头
getAllResponseHea
ders()
获取响应的所有http头
overrideMimeType通常用于重写服务器响应的MIME类型。Eg,正常情况下
XMLHttpRequest只接收文本数据,但我们可以重写MIME
为“text/plain; charset=x-user-defined”,以欺骗浏
览器避免浏览器格式化服务器返回的数据,以实现接收二
进制数据。
XMLHttpRequest Level 2
XMLHttpRequest是一个浏览器接口,使得Javascript可以进行 HTTP (S) 通信。但是,这个接口一直没有标准化,每家浏览器的实现或多或少有点不同。HTML 5 的概念形成后,W3C 开始考虑标准化这个接口。2008年 2 月,提出了XMLHttpRequest Level 2 草案。
1.老版本的缺点
老版本的XMLHttpRequest对象有以下几个缺点:
1)只支持文本数据的传送,无法用来读取和上传二进制文件。
2)传送和接收数据时,没有进度信息,只能提示有没有完成。
3)受到"同域限制"(Same Origin Policy),只能向同一域名的服务器请
求数据。
2.新版本的功能
新版本的XMLHttpRequest对象,针对老版本的缺点,做出了大幅改进。
1)可以设置 HTTP 请求的时限。
2)可以使用FormData对象管理表单数据。
3)可以上传文件。
4)可以请求不同域名下的数据(跨域资源共享,Cross-origin resource
sharing,简称 CORS)。
5)可以获取服务器端的二进制数据。
6)可以获得数据传输的进度信息。
3.介绍几个XMLHttpRequest Leve2 新增的成员
超时时限
timeout设置ajax请求超时时限,过了这个时限,就自动停止
HTTP请求。
ontimeout事件当ajax超过timeout 时限时触发的回调函数。
指定响应格式
responseType(默认:“text”)在发送请求前,根据您的数据需要,将
xhr.responseType设置为“text”、“arraybuffer”、
“blob”或“document”。
response成功发送请求后,xhr的响应属性会包含DOMString、
ArrayBuffer、Blob 或Document 形式(具体取决于
responseTyp的设置)的请求数据。
进度信息
progress 事件在XMLHttpRequest对象传递数据的时候用来返回进度信
息。它分成上传和下载两种情况。下载的 progress 事件
属于XMLHttpRequest对象,上传的 progress 事件属于
XMLHttpRequest.upload 对象。即:
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress; XHR 还新增了与progress 事件相关的五个事件: 1) load 事件:传输成功完成。 2) abort 事件:传输被用户取消。 3) error 事件:传输中出现错误。 4) loadstart 事件:传输开始。 5) loadEnd 事件:传输结束,但是不知道成功还是失败。
4. 一个新功能实例
1) 接收二进制数据(方法A :改写MIMEType )
老版本的XMLHttpRequest 对象,只能从服务器取回文本数据。但我们可以改写数据的MIMEType ,将服务器返回的二进制数据伪装成文本数据,并且告诉浏览器这是用户自定义的字符集。
关键代码如下: 服务端
?
1
2
3
4
5
6
7
8
9
1
11
String str ="二进制数据获取"; MemoryStream _memory =new MemoryStream(); BinaryFormatter formatter =new BinaryFormatter(); formatter.Serialize(_memory, str); _memory.Position = 0; byte [] read =new byte [_memory.Length]; _memory.Read(read, 0, read.Length); _memory.Close(); context.Response.ContentType ="text/plain"; // 服务器使用OutputStream 输出二进制流 context.Response.OutputStream.Write(read, 0, read.Length); 客服端
?
1 2 3 4 5 6 7 8 9 10 $('#btn_mime').bind('click',null ,function () {
$.ajax('AjaxHandler.ashx?func=GetBinaryData', {
type:'get', dataType:'text', cache:false ,
mimeType:'text/plain; charset=x-user-defined', success:function (data) { if (data) { var byte = [];
1 1 1
2 1
3 1
4 1
5 1
6 1
7 1
8 1
9 2 0for (var i = 0, len = data.length; i < len; ++i) { var c = data.charCodeAt(i);
byte[byte.length] = c & 0xff;
}
alert(byte);
}
}
});
});
浏览器会把相应数据当做文本数据接收,所以我们还必须再一个个字节地还原成二进制数据。位运算"c & 0xff",表示在每个字符的两个字节之中,只保留后一个字节,将前一个字节扔掉。原因是浏览器解读字符的时候,会把字符自动解读成Unicode 的 0xF700-0xF7ff 区段。
截图如下:(测试环境:google Chrome 版本 26.0.1410.43)
服务器端返回二进制数据:
客服端输出:
a)使用mimeType: 'text/plain; charset=x-user-defined'参数。
b)没有对服务器的MIME类型进行重写,导致返回信息被浏览器格式化
后输出的二进制数据与服务器不同。并且不同浏览器格式化后输出
的二进制数据都有差异。
2)接收二进制数据(方法B:responseType属性)
在XMLHttpRequest Level2中,可以使用新增的responseType 属性从服务器取回二进制数据。把responseType 设为 blob ,表示服务器传回的是二进制对象。
?
1
2
3 var xhr =new XMLHttpRequest(); xhr.open ('GET','/path/to/image.png'); xhr.responseType ='blob';
接收数据的时候,用浏览器自带的 Blob 对象即可。注意,读取的xhr.response ,而不是xhr.responseText 。
?
1 var blob =new Blob ([xhr.response], {type:'image/png'});
还可以将responseType 设为arraybuffer ,把二进制数据装在一个数组里。然后再遍历这个数组。
?
1 2
3 4 5 6 7 8 9 10 var xhr =new XMLHttpRequest ();
xhr.open ('GET','/path/to/image.png'); xhr.responseType ="arraybuffer"; var arrayBuffer = xhr.response; if (arrayBuffer) {
var byteArray =new Uint8Array (arrayBuffer); for (vari = 0; i 5. 更多XMLHttpRequest Level 2新功能描述请看: 1) XMLHttpRequest 增强功能 2) XMLHttpRequest Level 2 使用指南 3) XMLHttpRequest2 新技巧 jQuery 框架的Ajax jQuery 是一个快速、简单的JavaScript library ,核心理念是write less,do more(写的更少,做的更多)。它简化了HTML 文件的traversing ,事件处理、动画、Ajax 互动,从而方便了网页制作的快速发展。jQuery 是为改变你编写JavaScript 的方式而设计的。更多jQuery 科普知识请看:jQuery 百度百科(Eg :模块,历史版本) 下面介绍下jQuery 框架中ajax 相关API: 版本Jquery-1.7.1.js 。 1. jQuery.ajax( [url,] options ) 通过 HTTP 请求加载远程数据。 返回值:$.ajax() 返回jqXHR对象(jqXHR对象:为XMLHttpRequest对象的超集)。大多数情况下你无需直接操作该对象,但特殊情况下可 用于手动终止请求abort()。 ajax内部实现的两个重要对象:s对象和jqXHR对象。 1)s对象 由默认设置jQuery.ajaxSettings对象、options参数集合和jQuery.ajaxSetup({})默认设置合并而成s对象。 参数 名 描述 可由ajax的options参数设置 url(默认: 当前页地址) 要请求的目的URL地址。 user name pass word 用于响应HTTP访问认证请求的用户名及密码 type(默认: "GET") 请求方式 ("POST" 或 "GET")。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。 data Type 预期服务器返回的数据类型。如果不指定,jQuery将自动根据 HTTP 包MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。 必须确保网页服务器报告的 MIME 类型与我们选择的dataType所匹配。比如说,XML的话,服务器端就必须声明text/xml 或者application/xml 来获得一致的结果。 可用值: "xml " 返回 XML 文档, 可用jQuery处理。 "htm l" 返回纯文本 HTML 信息;包含的 script标签会在 插入dom时执行。 "scr ipt" 返回纯文本 JavaScript 代 码,常常用于跨域 请求。不会触发全 局事件和局部事 件;只支持GET方 式(POST请求会自 动转化为GET请 求);默认不启用 缓存 (cache:false) "jso n"返回 JSON 数据。JSON 数据是一种能很方便通过JavaScript 解析的结构化数据。 "jso np"JSONP 格式,用于跨域请求。 "tex t"返回纯文本字符串 其中,text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给 success 回调函数。 如果指定了 script 或者jsonp类型,那么当从服务器接收到数据时,实际上是用了 服务端代码: 深圳网站建设 :https://www.360docs.net/doc/2410528867.html, jquery 里面Ajax 几种不同的调用方法 我们经常会使用ajax 去调用我们的.net 里面的ashx 去实现无刷新调用数据的方法,下面我们就来讲一下我们常用的几种方法。 第一种方法是load 方法,下面是我们的代码 //url.ashx 是调用的地址,data 是返回的信息 $(".div").load("url.ashx", function (data){ //得到的信息 }); //url.ashx 是调用的地址,data 是返回的信息,type 是参数类型,有post ,与get 两种,datatype 是返回参数的类型,id 是传入的参数 第二种方法就是$.ajax 方法,代码如下 $.ajax({ url: "url.ashx", type: "GET", dataType: "json", data: { id: "1" }, success: function (data) { //得到的信息 } }); //url.ashx 是调用的地址,data 是返回的信息,id 是传入的参数 第三种方法就是$.get 方法,代码如下 $.get("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 }); //url.ashx 是调用的地址,data 是返回的信息,id 是传入的参数 第四种方法就是$.post 方法,代码如下 $.post("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 }); 这篇文章主要介绍了jquery+ajax实现跨域请求的方法,详细介绍了前台及后台的处理方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了jquery+ajax实现跨域请求的方法。分享给大家供大家参考。具体实现方法如下: 说明:这里的datatype 为jsonp ;type 只能为get 前台请求代码如下: 代码如下: $.ajax({ type: get, url: , datatype: jsonp, jsonp: jsoncallback, success: function (result) { alert(result.success); alert(result.content); }, error: function (result, status) { //处理错误 } }); 后台处理代码validaccountsexists.aspx如下: 代码如下: string accounts = gamerequest.getquerystring(accounts); string jsoncallback = gamerequest.getquerystring(jsoncallback); response.contentencoding =system.text.encoding.utf8; response.contenttype = application/json; response.write(jsoncallback + ({\success\:\true\,\content\:\ + accounts + \})); response.end(); 希望本文所述对大家的jquery程序设计有所帮助。 JQUERY AJAX异步操作详细说明 AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和XML)。它并非一种新的技术,而是以下几种原有技术的结合体。 1)使用CSS和XHTML来表示。 2)使用DOM模型来交互和动态显示。 3)使用XMLHttpRequest来和服务器进行异步通信。 4)使用javascript来绑定和调用。 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型: 1)不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制 权马上就被返回到浏览器。界面不会出现白板,在得到服务器响应之前 还可以友好的给出一个加载提示。 2)不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数,待 服务器响应到达时,触发回调函数,并且传递所需的少量数据。“按需 取数据”也降低了服务器的压力。 3)不需要使用隐藏或内嵌的框架。在XHR对象之前,模拟Ajax通信通常 使用hack手段,如使用隐藏的或内嵌的框架( 实例jquery里面Ajax几种不同的调用方法
jquery ajax实现跨域请求的方法
jQuery调用AJAX异步操作超清晰教程
jQuery ajax - ajax() 使用方法和示例
通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"https://www.360docs.net/doc/2410528867.html,",async:false}); $("#myDiv").html(htmlobj.responseText); }); });
HTML 代码: 321 导航
亲自试一试
定义和用法
ajax() 方法通过 HTTP 请求加载远程数据。 该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建 的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获 得更多的灵活性。 最简单的情况下,$.ajax() 可以不带任何参数直接使用。 注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。 语法
jQuery.ajax([settings])
参数 settings
描述 可选。用于配置 Ajax 请求的键值对集合。 可以通过 $.ajaxSetup() 设置任何选项的默认值。
参数 options 类型:Object
可选。AJAX 请求设置。所有选项都是可选的。 async 类型:Boolean 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设 置为 false。 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 beforeSend(XHR) 类型:Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。 XMLHttpRequest 对象是唯一的参数。 这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。 cache 类型:Boolean 默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页 面。 jQuery 1.2 新功能。 complete(XHR, TS) 类型:Function 请求完成后回调函数 (请求成功或失败之后均调用)。 参数:XMLHttpRequest 对象和一个描述请求类型的字符串。 这是一个 Ajax 事件。 contentType 类型:String 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定 会发送给服务器(即使没有数据要发送)。 context 类型:Object 这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对 象 (如果不设定这个参数, 那么 this 就指向调用本次 AJAX 请求时传递的 options 参数) 。 比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为 这个 DOM 元素。
jq方法大全
JQ方法大全 网友:linuxphpmysql 发布于:2008.10.22 08:58(共有条评论) 查看评论| 我要评论 Dom: Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("title", function() { return this.src }); 给某个元素添加属性/值 $("元素名称").html(); 获得该元素内的内容(元素,文本等) $("元素名称").html("new stuff"); 给某元素设置内容 $("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值 $("元素名称").removeClass("class") 给某元素删除指定的样式 $("元素名称").text(); 获得该元素的文本 $("元素名称").text(value); 设置该元素的文本值为value $("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式$("input元素名称").val(); 获取input元素的值 $("input元素名称").val(value); 设置input元素的值为value Manipulation: $("元素名称").after(content); 在匹配元素后面添加内容 $("元素名称").append(content); 将content作为元素的内容插入到该元素的后面 $("元素名称").appendTo(content); 在content后接元素 $("元素名称").before(content); 与after方法相反 $("元素名称").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)$("元素名称").empty() 将该元素的内容设置为空
JQuery中的AJAX详解
JQuery中的AJAX详解 目录(?)[-] load()方法 load(url,[data],[callback]) url为被加载的页面地址 data表示发送到服务器的数据,格式为key/value callback格式为:function(responseText,textStatus,XMLHttpRequest){ } //responseText:请求返回的内容 //textStatus:请求状态:success、error、notmodified、timeout这4种 //XMLHttpRequest:XMLHttpRequest对象 load()方法的传递方式根据参数data来自动指定。如果没有参数传递,则采用GET方式传递;反之,则自动转换为POST 方式 [javascript]view plaincopyprint? 1.$("#div1").load( 2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass",则表示获取jsp页面中类名为filterClass的全部元素 3.{ 4. name :clf, age : 25 5.//经测试,变量名加引号、单引号、不加引号,后台都能取到值 6.//如果含有中文,必须用encodeURI()进行编码,然后再服务器端用decodeURI()解码即可,如 7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()}, 8.}, //也可以用数组传值,{"attr []",["clf","25","male"]} 9.function (){ 10. $("#div2").text("AJAX"); 11.} 12.); [javascript]view plaincopyprint? 1.$("div").load("wrongname.xml",function(response,status,xhr){ 2.if (status=="success")
jQuery操作Ajax和Json
jQuery操作Ajax和Json 嗯,自己学SSH和做项目也已有两个月了。自己今天来整理一下自己在项目中利用jQuery操作过的Ajax和Json。 当时我对于jQuery操作Ajax几乎不怎么了解,但是项目中有需求,所以自己也是必须要去使用,因此现在来详细讲解一下自己在项目中的操作。 功能中,有一个下拉框,里面存储的是服务商的信息,首选项是“--请选择--”,当我选择第一个下拉框中服务商信息之后,后面紧接着将会得到这个选定的服务商下的所有产品。做一个联动操作。虽然我不会用jQuery操作Ajax,但是我第一反应就是想到利用这块技术,于是自己就开始查找对应的资料了。 首先,我在Action中,将服务商的信息从数据库查找出来,保存到List集合中,将集合转发到JSP界面上,利用的是struts2标签: