文档库
文档库 最新最全的文档下载
当前位置：文档库 › jQuery与JavaScript各自实现AJAX异步请求验证

jQuery与JavaScript各自实现AJAX异步请求验证

jQuery与JavaScript各自实现AJAX异步请求验证
jQuery与JavaScript各自实现AJAX异步请求验证

jQuery和JavaScript分别实现AJAX异步请求验证

AJAX概述

1.什么是Ajax？

Ajax是由Jesse James Garrett创造的，是“Asynchronous JavaScript + XML 的简写”。

2.Adaptive Path公司的Jesse James Garrett 这样定义Ajax：

Ajax不是一种新技术，而是一种新的理念。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。

Ajax包含：

基于XHTML和CSS标准的表示；

使用Document Object Model进行动态显示和交互；

使用XMLHttpRequest与服务器进行异步通信；

使用JavaScript绑定一切。

3. 与传统的Web应用不同，AJAX采用异步交互过程。

（1）.AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。

（2）.用户的浏览器在执行任务时即装载了AJAX引擎。

AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。

它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。

现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP 的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

3.核心对象—XMLHttpRequest，XMLHttpRequest详解参考

https://www.wendangku.net/doc/b57435146.html,/xmldom/dom_http.asp

XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

一、用户名校验服务器返回简单文本数据Ajax实例

1. 页面代码(checkUsername.html)

Html代码

1.

2.

3. "https://www.wendangku.net/doc/b57435146.html,/TR/html4/loose.dtd">

4.

5.

6.用户名校验

7.

8.

8.

9.

10.

11.

12. 用户名：

13.

14.

15.

16.

17.

18.

19.

20.

21.

2.JS代码(register.js)

Js代码

1.

2.//创建AJAX引擎

3.var xmlhttp;

4.function createXmlhttp () {

5. if (window.XMLHttpRequest) {

6. //针对FireFox，Mozillar，Opera，Safari，IE7，IE8

7. xmlhttp = new XMLHttpRequest();

8. //针对某些特定版本的mozillar浏览器的BUG进行修正

9. if (xmlhttp.overrideMimeType) {

10. xmlhttp.overrideMimeType("text/xml");

11. }

12. } else if (window.ActiveXObject) {

13. //针对IE6，IE5.5，IE5

14. //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在

一个js的数组中

15. //排在前面的版本较新

16. var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"

];

17. for (var i = 0; i < activexName.length; i++) {

18. try{

19. //取出一个控件名进行创建，如果创建成功就终止循

环

20. //如果创建失败，回抛出异常，然后可以继续循环，继

续尝试创建

21. xmlhttp = new ActiveXObject(activexName[i]);

22. break;

23. } catch(e){

24. }

25. }

26. }

27.}

28.//向servlet发送请求内容

29.function sendRequest ( url, content ) {

30. createXmlhttp ();

31. xmlhttp.onreadystatechange = processResponse; //回调方法，

注意没有()

32. xmlhttp.open( "post",url );

33. xmlhttp.setRequestHeader("content-type","application/x-www-

form-urlencoded");

34. xmlhttp.send(content);

35.}

36.//处理返回XML

37.function processResponse() {

38. if ( xmlhttp.readyState == 4 ) {

39. if ( xmlhttp.status == 200 || xmlhttp.status==0) {

40. //调用xml的解析方法

41. parserXML();

42. }

43. }

44.}

45.//解析xml

46.function parserXML() {

47. var xmldoc = xmlhttp.responseXML.documentElement;

48. //xml内容：true，在有的情况

下有多个

49. //dom中利用getElementsByTagName可以根据标签名来获取元素节

点，返回的是一个数组

50. var message_nodes = xmldoc.getElementsByTagName( "message"

);

51. //获取message节点中的文本内容

52. //message标签中的文本在dom中是message标签所对应的元素节点

的字节点，firstChild可以获取到当前节点的第一个子节点

53. //通过以下方式就可以获取到文本内容所对应的节点

54. var textNode = message_nodes[0].firstChild;

55. //对于文本节点来说，可以通过nodeValue/data的方式返回文本节

点的文本内容

56. var hasUser_txt = textNode.data;

57. var respname_obj = window.document.getElementById("result")

;

58. var font_obj=window.document.createElement("font"); //创

建字体dom元素

59. var result_obj;

60.

61. respname_obj.value="";

62. if ( hasUser_txt=="false" ) {

63. //创建文本节点

64. result_obj=window.document.createTextNode("恭喜您！该用

户名未被注册！");

65. font_obj.setAttribute("color","green"); //设置字体属

性

66. }else {

67. result_obj=window.document.createTextNode("对不起！该用

户名已被注册过了！");

68. font_obj.setAttribute("color","red"); //设置字体属

性

69. }

70.

71. font_obj.appendChild(result_obj); //把result节点增加到

font节点当中

72. respname_obj.appendChild(font_obj);

73.}

74.

75.//用来清空提示错误留下来的信息

76.function clearErrorResp(response_obj ) {

77. //取得父对象的子节点的个数

78. var size = response_obj.childNodes.length;

79. //从后往前，删除每个子节点

80. for( var i=size-1; i>=0; --i){

81. response_obj.removeChild(response_obj.childNodes[i]);

82. }

83.}

84.

85.//检查用户名信息

86.function checkUsername(evt) {

87. var userName_obj = window.document.getElementById("userName

");

88. var userName = userName_obj.value;

89. var response_obj = window.document.getElementById("result")

;

90.

91. //是否按ENTER键

92. if ( evt.keyCode==13 ) {

93. //判断用户名是否为空

94. if ( userName.length > 0) {

95. //用来清空上一次提示错误留下来的信息

96. response_obj.innerHTML="";

97. //clearErrorResp(response_obj);

98. var url = "xmlCheckUsername";

99. var content = "userName=" + userName;

100.

101. //调用Ajax请求方法

102. sendRequest( url, content );

103. } else {

104. //用来清空上一次提示错误留下来的信息

105. clearErrorResp(response_obj);

106. //设置元素节点中的html内容

107. response_obj.innerHTML="用户名不能为空！请输入用户名！";

108. //让光标停在用户名文本框中

109. userName_obj.focus();

110. return false;

111. }

112. }

113.}

3.Servlet代码(RegisterCheckUsername.java)：

Java代码

1.

2.package com.ajax;

3.

4.import javax.servlet.http.HttpServlet;

5.import javax.servlet.http.HttpServletRequest;

6.import javax.servlet.http.HttpServletResponse;

7.import javax.servlet.ServletException;

8.import java.io.IOException;

9.import java.io.PrintWriter;

10.

11./**

12. * @author Seany

13. *

14. * 类功能:注册账号时，异步校验用户名是否已存在

15. *

16. */

17.public class RegisterCheckUsername extends HttpServlet {

18.

19. protected void doPost(HttpServletRequest request,

20. HttpServletResponse response) throws ServletExcepti

on, IOException {

21. doGet(request, response);

22. }

23.

24. protected void doGet(HttpServletRequest request,

25. HttpServletResponse response) throws ServletExcepti

on, IOException {

26. request.setCharacterEncoding("utf-8");

27. // 服务器响应内容格式为xml

28. response.setContentType("text/xml");

29. response.setCharacterEncoding("utf-8");

30.

31. String userName = request.getParameter("userName");

32.

33. // 真实开发中为业务层从数据库中获取数据

34. String userInfo = "hello".equals(userName) ? userName :

null;

35.

36. boolean isExist = false;

37. if (userInfo == null) {

38. isExist = false;// "该用户名未被注册！";

39. } else {

40. isExist = true; // "该用户名已被注册过了！";

41. }

42.

43. PrintWriter out = null;

44.

45. try {

46. out = response.getWriter();

47. out.print("");

48. out.print("");

49. out.print(isExist);

50. out.print("");

51. out.print("");

52. } catch (Exception e) {

53. e.printStackTrace();

54. } finally {

55. out.flush();

56. out.close();

57. }

58. }

59.}

4. web.xml

Xml代码

1.

2.

3.

4.xmlns="https://www.wendangku.net/doc/b57435146.html,/xml/ns/j2ee"

5.xmlns:xsi="https://www.wendangku.net/doc/b57435146.html,/2001/XMLSchema-instance"

6.xsi:schemaLocation="https://www.wendangku.net/doc/b57435146.html,/xml/ns/j2ee

7. https://www.wendangku.net/doc/b57435146.html,/xml/ns/j2ee/web-app_2_4.xsd">

8.

9.

10. RCheckUsername

11. com.ajax.RegisterCheckUsername

class>

12.

13.

14.

15. RCheckUsername

16. /xmlCheckUsername

17.

18.

19.

改写为jQuery代码：

第1，3，4不变，改写第2点JS代码如下：

Js代码

1.//检查用户名信息

2.function checkUsername(evt) {

3. //是否按ENTER键

4. if ( evt.keyCode==13 ) {

5. verify();

6. }

7.}

8.

9.function verify(){

10. //1.获取文本框中的内容

11. //document.getElementById("userName"); dom的方式

12. //Jquery的查找节点的方式，参数中#加上id属性值可以找到一个

节点。

13. //jquery的方法返回的都是jquery的对象，可以继续在上面执行其

他的jquery方法

14. var userName_obj = $("#userName");

15. var userName = userName_obj.val();

16.

17. if (userName.length<=0) {

18. $("#result").css({color:"black"}).html("用户名不能为空！

请输入用户名！");

19. return;

20. }

21. var req_url = "xmlCheckUsername";

22. //2.将文本框中的数据发送给服务器段的servelt

23. $.ajax({

24. type: "POST", //http请求方

式

25. url: req_url, //服务器段url地

址

26. data: "userName=" + userName, //发送给服务器段的数

据

27. dataType: "xml", //告诉JQuery返回的数

据格式

28. success: callback //定义交互完成，并且服

务器正确返回数据时调用的回调函

数

29. });

30.}

31.

32.//回调函数

33.function callback(data) {

34. //3.接收服务器端返回的数据

35. //首先需要将dom的对象转换成JQuery的对象

36. var jqueryObj = $(data);

37. parseXml(jqueryObj);

38.}

39.

40.//解析XML

41.function parseXml(obj){

42. //获取message节点

43. var message = obj.children();

44. //获取文本内容

45. var result_txt = message.text();

46.

47. //4.将服务器段返回的数据动态的显示在页面上

48. //找到保存结果信息的节点

49. var resultObj = $("#result");

50. if (result_txt == "true") {

51. resultObj.html("");

52. resultObj.css("color","red").html("对不起！该用户名已被

注册过了！");

53. } else if(result_txt == "false" ){

54. resultObj.html("");

55. resultObj.css("color","green").html("恭喜您！该用户名未

被注册！");

56. }

57.}

jQuery Ajax 全解析(.ajax .post .get)

jQuery Ajax 全解析【.ajax .post .get】 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文件，例如表单。 示例代码： $(".ajax.load").load("https://www.wendangku.net/doc/b57435146.html,/QLeelulu/archive/2008/03 /30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即 $(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求 参数： url (String) : 发送请求的URL地址.

jquery+ajax

jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.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文件，例如表单。 示例代码： $(".ajax.load").load("https://www.wendangku.net/doc/b57435146.html,/yeer/archive/2009/06/10/1500682.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。 注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。

jQuery 5种调用AJax的方法

jQuery 如何调用AJax（五种方法）方法一：load() 使用load方法可以帮助你加载非本地的HTML页面，并注入到当前调用的DOM中。 $.ajaxSetup({ cache: false }); var ajax_load = "加载中..."; var loadUrl = "ajax/load.php"; $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl);

}); cache: false 的意思是让浏览器不执行缓存功能，这样的话页面的内容将实时更新，否则某些浏览器会出现内容不更新的问题，当点击按钮后，因为加载过程需要时间，所以这里我们先使用.html方法来添加一个”加载中”的图片，然后执行load方法。 高级使用方法： 1. 加载页面某一部分 例如只加载ID为”pic”的部分，代码如下： $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl + " #pic"); }); 2. 递交参数执行页面加载

可以给load方法添加GET或者POST参数，代码如下： $("#load_get").click(function() { $("#result").html(ajax_load).load(loadUrl, "page=0&size=10"); }); $("#load_post").click(function() { $("#result").html(ajax_load).load(loadUrl, { page: 0, size: 10 }); }); 3. 添加回调函数 回调函数可以让你在结束AJAX调用后调用该函数，比如在页面load后提示用户加载完毕：

jQuery中的Ajax几种请求方法

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.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文件，例如表单。 示例代码： $(".ajax.load").load("[url]https://www.wendangku.net/doc/b57435146.html,/QLeelulu/archive/2008/03/30/1130270.html[/url] .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。 注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求 参数： url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据，以Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例代码： $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图

jQuery+AJAX+JSON

jQuery 1. 什么是jQuery?? jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript类库。 jQuery的核心理念是Write less，Do more。 使用jQuery可以兼容各种浏览器，方便的处理HTML、Events、动画效果等，并且方便的为网站提供AJAX交互。 2.jQuery的特点： 利用选择器来查找要操作的节点，然后将这些节点封装成一个jQuery对象，通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。 好处：a、兼容性更好；b、代码更简洁 3.编程步骤： step1、使用选择器查找节点 step2、调用jQuery的属性和方法 4.jQuery对象与DOM对象之间的转换 1. 什么是jQuery对象？？ jQuery对象是jQuery对底层对象的一个封装，只有创建了这个对象，才能使用类库中提供的方法。 2. DOM对象 ----> jQuery对象 DOM对象向jQuery对象的转变很容易，外面追加$和圆括号即可。 function f( ){ var obj = document.getElementById(‘d1’); //DOM -> jQuery对象

var $obj = $(obj); $obj.html(‘hello jQuery’); } 3. jQuery对象 ----> DOM对象 jQuery对象向DOM对象转化，通过调用get方法加参数值0即可$obj.get(0)。 function f( ){ var $obj = $(‘#d1’); //jQuery对象 -> DOM var obj = $(obj).get (0); obj.innerHTML = ‘hello jQuery’; } 5. jQuery选择器 1. 什么是jQuery选择器？？ jQuery选择器是一种类似CSS选择器的特殊说明符号，能够帮助jQuery 定位到要操作的元素上，使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。 2. 选择器的种类 a、基本选择器 #id根据指定的ID匹配一个元素 .class根据指定的类匹配一个元素 element根据的指定的元素名匹配所有的元素

jquery_2.3 Ajax操作新

1.jQueryAjax 编程 1.1. 通过需求回顾Ajax编程 1.1.1.需求：验证用户名是否有效 需求：添加用户名的离焦校验 html代码 JS代码： 服务端代码：

jquery里面Ajax几种不同的调用方法

深圳网站建设 ：https://www.wendangku.net/doc/b57435146.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实现跨域请求的方法,详细介绍了前台及后台的处理方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了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异步操作超清晰教程

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手段，如使用隐藏的或内嵌的框架(