JavaScriptAjax编程应用篇_javascript技巧_第1页
JavaScriptAjax编程应用篇_javascript技巧_第2页
JavaScriptAjax编程应用篇_javascript技巧_第3页
JavaScriptAjax编程应用篇_javascript技巧_第4页
JavaScriptAjax编程应用篇_javascript技巧_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、javascript ajax编程 应用篇一、ajax (asynchronous javascript + xml)能够像服务器请求额外的数据 而无需卸载页面，即局部刷新技术二、创建一个xhr对象function createxhr () if (typeof xmlhttprequest != ，zundefined，z) return new xmlhttprequest(); else if (typeof activexobject !二"undefined") / < te7 if (typeof arguments. callcc. activcxstr

2、ing != "string) var version = ，zmsxml2. xmlhttp. 6. 0", "msxml2. xmlhttp. 3. 0","msxml2. xmlhttp",i, len;for ( i 二 0, len = version, length; i < len; i+) try new activexobject(versioni); arguments, callee. activexstring = versioni; break; catch (ex) return new active

3、xobject(arguments, callee. activexstring); else throw new error (z，no support for xhr);var xhr = createxhr ();alert (xhr); / object xmlhttprequest三、用法 注意：本节的实例都应用于服务器端1. 调用open ()方法。它接受3个参数：要发送的请求的类型(英t、post 等)、请求的url和表示是否异步发送请求的布尔值。2. 要发送请求，调用send ()方法，接受一个参数，即要作为请求发送的 主体。如果不需要，则为null3. 返回的数据会自动填充到

4、xhr对象的属性中。var xhr = createxhr ();/ get方式同步打开example, txt文件/同步：javascript代码会等待服务器响应后执行 xhr. open("get", "example txt", false);xhr send(null);/ status代表响应的http状态/ 200代表ok, 304表示缓存if (xhr. status >二 200 && xhr.status < 300) | xhr. status 二二 304) alert (xhr. responsetex

5、t) ; / 返回响应的文本,123456 else alert ("'request was unsuccessful: " + xhr .status);4. example, text文件内容为字符串：123456四、前面的使用的同步的方式，当然不会存在问题，所有我们要挑战一个异步 的方法。var xhr = createxhro ;/ xhr. readystate 示请求/响应的当前状态，4代表已经接受了全部的响应 数据/ 另外只要 xhr. readystate 的值发生了改变,那么 xhr. onrcadystatcchangc 事件就会触发xhr.o

6、nreadystatechange = function ()if (xhr.readystate 二二 4) if (xhr. status >二 200 && xhr. status < 300) | xhr. status 二二 304) alert (xhr rcsponsctcxt); else alert (''request was unsuccessful: " + xhr .status);；xhr. open("get", "example.txt", true);xhr.send

7、 (null);五、每个http请求和响应都会带有相应的头部信息1默认情况下，在发送xiir请求的同时，还会发送下列头部信息。 ©accept：浏览器能够处理的内容类型。 accept-char set：浏览器能够显示的字符集。 accept-encoding：浏览器能够处理的压缩编码。 accept-language：浏览器当前设置的语言。 connection：浏览器与服务器之间连接的类型。 cookie：当前页面设置的任何cookieo host：发岀请求的页面所在的域。 referer：发出请求的页面的uri。 user-agent：浏览器的用户代理字符串。2. 使用setr

8、equestlleader()方法可以设置自定义的请求头部信息。接受两 个参数：头部字段的名称和头部字段的值var xhr = createxhro ;/ xhr. readystate示请求/响应的当前状态，4代表已经接受了全部的响应数据/ 另外只要 xhr. readystate 的值发生了改变,那么 xhr. onreadystatechange 事件就会触发xhr.onreadystatechange = function ()if (xhr. readystate 二二 4) if (xhr. status >二 200 && xhr.status < 3

9、00) | xhr. status 二二 304) al ert(xhr.responsetext); else alert ('"request was unsuccessful: " + xhr. status);xhr. open("get", "example, txt", true);/必须在open () z后调用xhr. setrequestheader (/zname/z, "zhang") ; / 在 example, txt 的 http 中可以 看到接受的"name：zhan

10、g"xhr.send (nul1);3. 获取请求的头部信息和相应信息，调用gctresponschcadcr ()方法 getal iresponseheaders ()方法var xhr 二 createxhr();/ xhr. readystate表示请求/响应的当询状态，4代表已经接受了全部的响应 数据/ 另外只要 xhr. readystate 的值发生了改变，那么 xhr. onreadystatechange 事件就会触发xhr.onreadystatechange 二 function()if (xhr.readystate 二二 4) if (xhr.status

11、>= 200 && xhr.status < 300) | xhr.status = 304) /获取响应头的content-typevar connection = xhr. getresponseheader (/zcontent-type/z);/ alert (cormection); / text/plain/获取所有的响应信息var all 二 xhr. gctallrcsponscllcadcrs ();alert (all); else alert("request was unsuccessful: " + xhr. statu

12、s);xhr. open("get", example. txt", true); xhr.send(null);六、get请求，前面我们已经讨论了 get请求的方法，现在我们来扩展一下，为 get请求添加一些参数/*url :不带请求的urlname :请求键value :请求值return :带请求字符串的url*/function addurlparam(url, name, value) url + 二(url. indexof (，z?，z) = -1 ?url +二 encodeuricomponent(name) + 二 + encodeuricom

13、ponent(value); return url;var xhr = createxhr ();xhr.onreadystatechange = function ()if (xhr.readystate 二二 4) if (xhr. status >二 200 && xhr. status < 300) | xhr. status 二二 304) alert (xhr rcsponsctcxt); else alert (''request was unsuccessful: " + xhr .status);；var url = &q

14、uot;example.txt"url = addurlparam(url, "name", /zzhang，z);url 二 addurlparam(url, age， 23);/ 请求的 url 变成了： example. txt?name=zhang&age=23xhropen ("get", url, true);xhr.send (null);七、post请求1案例分析：接下来我们共同讨论一个以post方法发送请求的ajax应用, 即用户注册，根据你注册用户名返回提示。2. 实现步骤1)首先要冇一个注册的页而(当然，这里很简陋

15、)ajax, html<!doctype html><html><head><meta http-equiv二content-type" content二text/html; charset=utf-8> <title>无标题文档</title><style></style></head><body><form name=，myform/，method二post"姓名：<input type二text" name二usernaine&

16、quot; /xlabel id二userlabel>请 输入用户名</label><br/>密码：input type二password" name二password" /><br/>input type二"submit" value二"登录"/><br/></form><script sre二eventut订.js/zx/script><script sre二serialize. js/z></script><s

17、cript src=，/ajax. js，zx/script><script src=，ajaxdo. jsz，x/script></body></html>2）接着当然是javascript部分©eventutil. js,这里只是将事件监听的部分列出 来var eventutil = addevent : function (element, type, handler) i f (element. addeventli stener)element. addeventlistener(type, handler, false); els

18、e if (element. attachevent)element .attachevent(on + type, hem dler); serialize, js：表单序列化function serialize(form)var parts = , field = null, i, len, j, optlen, option, optvalue;for (i二0, len=formelements, length; i < len; i+) field = form, elementsi;switch(field, type) case z，selcct-onc：case &quo

19、t;select-multiple：if (field, name, length) for (j二0, optlen 二 field, options, length; j < optlen; j+) option 二 field, optionsj;if (option. selected) optvalue ="“；if (option.hasattribute)optvalue = (option. hasattribute (/zvalue/z) ? option. value : option, text); else optvalue 二(option. attr

20、ibutcs/valuc，l specified ? option, value : option, text);parts.push (encodeuricomponent(field .name) + 二 + encodeurtcomponent(optvalue);break;case undefined: /字段集 case "file": /文件输入 case "submit": /提交按钮 case "reset": /重置按钮 case "button: /自定义按钮 break;case "radi

21、o": /单选按钮 case "checkbox": /复选框 if (!field. checked) break;/*执行默认操作*/default:/不包含没有名字的表单字段 if (field, name, length) parts.push(encodeurtcomponent(field, name) + 二 + cncodcuricomponcnt(field, value);return parts. join(&)； ajax, js,就是上而的那个createxhro函数，这里就不罗列了。 ajaxdo. js,核心文件,就是我们操作

22、部分,这个名字乱写的。var form = document, forms 0 ; / 获取表单var username = form elements'username' ; / 用户名var userlabel = document. queryselector ("siuserlabel") ; / 提示标签eventut订.addevent(username, blin、，function() var xhr = createxhr ();xhr.onreadystatechange = function()if (xhr rcadystatc 二二

23、 4) if (xhr. status >= 200 && xhr. status < 300) | xhr. status = 304) var text 二 xhr. responsetext;/当为true时，提示绿色字体/当为false时，提示为红色字体if (text) userlabe1. style, color = "green"userlabel. firstchild. data = 恭喜你，用户名可用; else userlabe1. style .color = "red"userlabel. firs

24、tchild. data = 对不起,该用户已存在; else alert ("request was unsuccessful: " + xhr.status);；/ post请求xhr. open("post", "dome. php，true);/提交的内容类型 xhr sctrequcsthcader ("content-type", "appliedtion/x-www-fonb-ui'lencodect);/将表单序列化xhr. send(serial ize(form);)；3改进部分：大家都

25、看见了，刚才在捉交表单时，我们序列化了表单。在 xmlhttprequest 2级为此定义了 formdata类型，它会自动为我们序列化表单, 不需要我们自己写了。我们只动部分代码/此处省略代码和上面一致/ post请求xhr. open(post，"dome. phpz，, true);/仅仅这里需要改动，代替之前serialize, js中的函数xhr.send(new formdata(form);八、其他部分(了解，因为兼容性还不够)1 超时设定xhr.open ("get", "example. txt，true);xhr. timeout = 1000; /将超时设置为1秒钟(仅适用于ie8+)xhr. on timeout 二 functi on() al ert (z/reques t did not return in a seco nd. )；;xhr.send (null);2. overridemimetype ()方法，针对服务

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论