ajax实例与解析

最新推荐文章于 2024-12-01 06:33:44 发布

luckyweiqi

最新推荐文章于 2024-12-01 06:33:44 发布

阅读量347

点赞数

本文链接：https://blog.youkuaiyun.com/luckyweiqi/article/details/8277438

版权

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

1. 页面代码(checkUsername.html)

Html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户名校验</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="checkUsername.js"></script>
</head>
<body>
用户名： <br/>
<input type="text" id="userName" onkeypress="checkUsername(event)" />
<input type="button" value="定位文本框，按Enter校验" />
<span id="result"></span>
</body>
</html>

2. JS代码（checkUsername.js）

Js代码

2. var xmlhttp;
3. //接收回车按键
4. function checkUsername(evt){
5. if(evt.keyCode==13){
6. verify();
7. }
8. }
10. //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
11. function verify() {
12. //1.使用dom的方式获取文本框中的值
13. //document.getElementById("userName")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如果<input>
14. //".value"可以获取一个元素节点的value属性值
15. var userName = document.getElementById("userName").value;
17. //2.创建XMLHttpRequest对象
18. //这是XMLHttpReuquest对象无部使用中最复杂的一步
19. //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
21. if (window.XMLHttpRequest) {
22. //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
23. xmlhttp = new XMLHttpRequest();
24. //针对某些特定版本的mozillar浏览器的BUG进行修正
25. if (xmlhttp.overrideMimeType) {
26. xmlhttp.overrideMimeType("text/xml");
27. }
28. } else if (window.ActiveXObject) {
29. //针对IE6，IE5.5，IE5
30. //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
31. //排在前面的版本较新
32. var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
33. for (var i = 0; i < activexName.length; i++) {
34. try{
35. //取出一个控件名进行创建，如果创建成功就终止循环
36. //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
37. xmlhttp = new ActiveXObject(activexName[i]);
38. break;
39. } catch(e){
40. }
41. }
42. }
43. //确认XMLHTtpRequest对象创建成功
44. if (!xmlhttp) {
45. alert("XMLHttpRequest对象创建失败!!");
46. return;
47. }
49. //3.注册回调函数
50. //注册回调函数时，之需要函数名，不要加括号
51. //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
52. xmlhttp.onreadystatechange = callback;
54. //4.设置连接信息
55. //第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
56. //第二个参数表示请求的url地址，get方式请求的参数也在url中
57. //第三个参数表示采用异步还是同步方式交互，true表示异步
58. var url = "CheckUsername?userName="+ userName; //这里的url即CheckUsername要和xml中url-pattern一致
59. //xmlhttp.open("GET",url,true);
61. //POST方式请求的代码
62. xmlhttp.open("POST",url,true);
63. //POST方式需要自己设置http的请求头,这句话不能去，否则得不到数据。确保服务器知道请求体中有参数。
64. xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
66. //5.发送数据，开始和服务器端进行交互
67. //同步方式下，send这句话会在服务器段数据回来后才执行完
68. //异步方式下，send这句话会立即完成执行
69. //GET/POST方式发送数据
70. xmlhttp.send(null);
72. //POST方式还可这样发送数据，这时上面的url只为：checkUsername
73. //xmlhttp.send("userName=" + userName);
74. }
76. //回调函数
77. function callback() {
78. //6.接收响应数据
79. //判断对象的状态是交互完成
80. if (xmlhttp.readyState == 4) {
81. //判断http的交互是否成功
82. if (xmlhttp.status == 200) {
83. //获取服务漆器端返回的数据
84. //获取服务器段输出的纯文本数据
85. var responseText = xmlhttp.responseText;
86. //将数据显示在页面上
87. //通过dom的方式找到div标签所对应的元素节点
88. var spanNode = document.getElementById("result");
89. //设置元素节点中的html内容
90. spanNode.innerHTML = responseText;
91. } else {
92. alert("error！");
93. }
94. }
95. }