Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术。这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载。
假设使用 Ajax 从某个已知文档“test.txt”获取文件。
1 // 1. 得到做 ajax 操作的对象
2 // 系统提供的一个构造函数,可以进行网络请求
3 var ajaxObj = new XMLHttpRequest();
4
5 // 2. 给对象,指定请求方式,请求的地址
6 // 五个参数
7 // ①. GET 方式
8 // ②. 访问地址
9 // ③. true 就是异步请求(现代浏览器已经不支持同步请求了)
10 // ④. 账户名
11 // ⑤. 账户密码
12 ajaxObj.open("GET", "test.txt", true);
13 // ajaxObj.open("GET", "test.php", true); //别的文件也是可以的
14
15 // 3. 发送请求给服务器做处理
16 ajaxObj.send();
17
18 // 4. 当接收到服务器发回的相应信息,如何处理数据
19 // onreadystatechange 准备状态的改变
20 ajaxObj.onreadystatechange = function() {
21 if (ajaxObj.readyState == 4) {
22 // 判断 http 的响应状态码,这个范围内都算有相应
23 if (ajaxObj.status >= 200 && ajaxObj.status <= 300) {
24 // 提示响应内容,包含但不限于 php 的 echo 内容
25 alert(ajaxObj.responseText);
26 };
27 };
28 };
29
此时我们执行文件,即可获取 test.txt 文件中已经被写入的内容。
在此有需要说明问题:ajaxObj.readyState == 4
指的是什么?
在这里其实一共有物种状态:0,1,2,3,4
状态 | 说明 |
---|---|
0 | 未初始化状态:这个阶段确认 XMLHttpRequest 对象是否创建,为了使用 open 方法做准备,当值为0的时候,表示对象已经存在了,否则会报错 |
1 | 载入状态:对 XMLHttpRequest 对象进行初始化,就是调用 open 方法,为请求做设置,并且调用 send() 方法向服务器发送请求,1 就代表正在向服务器发送请求 |
2 | 载入完成:这个阶段代表刚接受到服务器发来的数据,这个数据是原始数据,还不能直接给客户端使用,为下一阶段做准备 |
3 | 解析(数据交互):此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型,把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。 |
4 | 完成:此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成,值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。 |
1 // 封装 Ajax 基本代码
2 function ajaxFn(url,succFn) { // succFn 表示数据处理成功后如何处理这个函数
3 var ajaxObj = new XMLHttpRequest();
4 ajaxObj.open("GET", url, true);
5 ajaxObj.send();
6 ajaxObj.onreadystatechange = function() {
7 if (ajaxObj.readyState == 4) {
8 if (ajaxObj.status >= 200 && ajaxObj.status <= 300) {
9 // 利用参数中处理数据的函数
10 succFn(ajaxObj.responseText);
11 };
12 };
13 };
14 };
15 // 这是一个回调函数
16 ajaxFn("test.txt",function (data) {
17 alert(data);
18 });
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 用户名:<input type="text" id="user"/><br>
9 密__码:<input type="password" id="pass"/><br>
10 <button id="getTxt">验证</button>
11 <div id="div1">
12
13 </div>
14 </body>
15 <script src="Ajax_封装.js" type="text/javascript" charset="utf-8"></script>
16 <script type="text/javascript">
17 var user = document.getElementById("user"),
18 pass = document.getElementById("pass"),
19 btn = document.getElementById("getTxt"),
20 div = document.getElementById("div1");
21 btn.onclick = function () {
22 // 按钮点击 连接到了 login.php 文件
23 // 队请求内容进行字符串的拼接
24 var url1 = "login.php?user="+user.value+"&pass="+pass.value;
25 ajaxFn(url1,function (data) {
26 div.innerHTML = data; // 显示是否登录成功
27 })
28 }
29 </script>
30 </html>
注意:我们在向 login.php 请求数据的时候,对参数 url1进行了拼接,拼接完成后在 login.php 内查询对应值。
1 <?php
2
3 // 登录验证
4 $user = $_GET["user"];
5 $pass = $_GET["pass"];
6
7 $link = mysql_connect("localhost", "root");
8 mysql_select_db("N_&_P", $link);
9 $re = mysql_query("select * from `N_&_P` where username = '{$user}' and password = '{$pass}'");
10 $obj = mysql_fetch_object($re);
11 if ($obj) echo "登录成功了!";
12 else echo "登录失败了!";
13 ?>