首页 > 代码库 > AJAX和JSON—ajax

AJAX和JSON—ajax

AJAX简介

(1)AJAX是一种用于创建快速动态网页的技术。AJAX=异步JavaScript 和 XML;
(2)AJAX 是异步交互,局部刷新;
(3)AJAX能减少服务器压力;
(4)AJAX 能提高用户体验;

AJAX使用

AJAX实现异步交互,是通过XMLHttpRequest对象实现的。除了IE5和IE6,目前所有浏览器均支持XMLHttpRequest对象(IE5 和 IE6 使用 ActiveXObject)。在创建对象时需要进行判断。
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

1.XMLHttpRequest对象创建

var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }else{
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

2.XMLHttpRequest对象请求后台

open(method,url,async)  该方法规定请求的类型、URL 以及是否异步处理请求。  
    method:请求的类型:GET 或 POST
         GET 更简单也更快,并且在大部分情况下都能用
         使用POST的情况:无法使用缓存文件(更新服务器上的文件或数据库), 向服务器发送大量数据(POST 没有数据量限制), 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
    url:文件在服务器上的位置            
    async:true(异步)或 false(同步)
           为True 的话,表示的是异步,异步表示程序请求服务器的同时,程序可以继续执行;能提高系统的运行效率;
           为False 的话,表示同步,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
           一般用 True;  

 

send(string)  该方法将请求发送到服务器。
    string:仅用于 POST 请求    

setRequestHeader(header,value)  向请求添加 HTTP 头。
    header: 规定头的名称
    value: 规定头的值
    头信息使用固定值:xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

示例:

a.使用url形式发送

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 <script type="text/javascript">
 9     function loadName(){
10         var xmlHttp;
11         if(window.XMLHttpRequest){
12             xmlHttp=new XMLHttpRequest();
13         }else{
14             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
15         }
16         // xmlHttp.open("get", "getAjaxName?name=Tom&age=1", true);
17         xmlHttp.open("post", "getAjaxName?name=Tom&age=1", true);
18         xmlHttp.send();
19     }
20 </script>
21 </head>
22 <body>
23 <div style="text-align: center;">
24     <div><input type="button" onclick="loadName()" value="Ajax获取数据"/>&nbsp;&nbsp;<input type="text" id="name" name="name" /></div>
25 </div>
26 </body>
27 </html>

b.使用html形式发送,类似Form表单提交

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 <script type="text/javascript">
 9     function loadName(){
10         var xmlHttp;
11         if(window.XMLHttpRequest){
12             xmlHttp=new XMLHttpRequest();
13         }else{
14             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
15         }
16         xmlHttp.open("post", "getAjaxName", true);
17         xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
18         xmlHttp.send("name=Tom&age=1");
19     }
20 </script>
21 </head>
22 <body>
23 <div style="text-align: center;">
24     <div><input type="button" onclick="loadName()" value="Ajax获取数据"/>&nbsp;&nbsp;<input type="text" id="name" name="name" /></div>
25 </div>
26 </body>
27 </html>

3.XMLHttpRequest对象响应服务器

当请求被发送到服务器时,我们需要执行一些基于响应的任务,这时我们需要用到XMLHttpRequest对象的三个属性:
XMLHttpRequest对象具有三个重要的属性:
    onreadystatechange属性   存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
    readyState属性   存有 XMLHttpRequest 的状态信息,从0到4发生变化:
                                                                                                        0: 请求未初始化
                                                                                                        1: 服务器连接已建立
                                                                                                        2: 请求已接收
                                                                                                        3: 请求处理中
                                                                                                        4: 请求已完成,且响应已就绪
                                                                                                 status:
                                                                                                        200: "OK"
                                                                                                        404: 未找到页面
    responseText属性   获得字符串形式的响应数据,即服务器返回的数据
在onreadystatechange事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务,使用XMLHttpRequest对象的responseText属性获得来自服务器的响应。

示例:

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 <script type="text/javascript">
 9     function loadName(){
10         var xmlHttp;
11         if(window.XMLHttpRequest){
12             xmlHttp=new XMLHttpRequest();
13         }else{
14             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
15         }
16         alert("readState状态:"+xmlHttp.readyState+";status状态:"+xmlHttp.status);
17         xmlHttp.onreadystatechange=function(){
18             alert("readState状态:"+xmlHttp.readyState+";status状态:"+xmlHttp.status);
19             if(xmlHttp.readyState==4 && xmlHttp.status==200){
20                 alert(xmlHttp.responseText);
21                 document.getElementById("name").value=xmlHttp.responseText;
22             }
23         };
24         xmlHttp.open("post", "getAjaxName", true);
25         xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
26         xmlHttp.send("name=Tom&age=1");
27     }
28 </script>
29 </head>
30 <body>
31 <div style="text-align: center;">
32     <div><input type="button" onclick="loadName()" value="Ajax获取数据"/>&nbsp;&nbsp;<input type="text" id="name" name="name" /></div>
33 </div>
34 </body>
35 </html>

 

AJAX和JSON—ajax