10 Django之Ajax请求

一、什么是Ajax技术?

　　异步的JavaScript和XML.使用Javascript语言与服务器进行异步交互,传输的数据为XML(更多的使用json数据).Ajax不是一门新的编程语言,而是一种使用现有标准的一套方法.

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

　　优点:

　　　　在不重新加载真个页面的情况下,可以与服务器交换数据并且更新部分网页内容.(这个特点让用户在不知不觉中完成请求和响应).并且Ajax不需要任何插件,但是需要用户允许JavaScript在浏览器上执行.

　　(1)同步交互:客户端发送一个请求后,需要等待服务器响应结束后,才能发出第二个请求,是串行的.

　　(2)异步交互:客户发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求.

二、基本格式

　　使用Ajax的请求是基于onclick事件的（post）

　　当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：

1 <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
2 <button type="button" onclick="loadXMLDoc()">修改内容</button>

　　Ajax请求格式：

1 <head>
2 <script>
3 function loadXMLDoc()
4 {
5     .... AJAX 脚本执行 ...
6 }
7 </script>
8 </head>

　　一套完整代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script>
 6 function loadXMLDoc()
 7 {
 8     var xmlhttp;
 9     if (window.XMLHttpRequest)
10     {
11         // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
12         xmlhttp=new XMLHttpRequest();
13     }
14     else
15     {
16         // IE6, IE5 浏览器执行代码
17         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
18     }
19     xmlhttp.onreadystatechange=function()
20     {
21         if (xmlhttp.readyState==4 && xmlhttp.status==200)
22         {
23             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
24         }
25     }
26     xmlhttp.open("GET","/try/ajax/demo_get.php",true);
27     xmlhttp.send();
28 }
29 </script>
30 </head>
31 <body>
32 
33 <h2>AJAX</h2>
34 <button type="button" onclick="loadXMLDoc()">请求数据</button>
35 <div id="myDiv"></div>
36 
37 </body>
38 </html>

三、创建XMLHTTP Response对象

　　XMLHTTP Response是Ajax的基础，用于在后台与服务器进行交换数据。意味着可以不加载真个页面的情况下，对页面的某部分进行更新。

　　创建语句：

variable=new XMLHttpRequest();

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp; 
if (window.XMLHttpRequest) 
{ 
　　// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 
　　xmlhttp=new XMLHttpRequest(); } 
else { 
　　// IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

四、向服务器发送请求

　　XMLHttpResponse 对象用于和服务器交换数据。

　　向服务器发送请求会使用两个方法open()和send()

1 xmlhttp.open('GET',"ajax_info.text",true);   #open(method,url,async)
　　method : 请求的类型: POST或GET
　　url : 文件在服务器上的位置
　　async : true(异步)或者 false(同步)

2 xmlhttp.send();   #send(string)
　　string: 仅用于POST请求

　服务器上的文件是任何类型的文件,可以是文本.txt和.xml或者脚本文件如.asp和.php(在传回响应值前,能够在服务器上执行任务)

　 XMLHttpResponse对象如果要用于AJAX的话,其open()方法的async参数必须设置为teue:

xmlhttp.open("GET","ajax_test.html",true);

　　通过 AJAX，JavaScript 无需等待服务器的响应，而是：

　　　　(1)在等待服务器响应时执行其他脚本

　　　　(2)当响应就绪后对响应进行处理

　　当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数.

　　如需使用 async=false，请将 open() 方法中的第三个参数改为 false,如果对一些小型请求也是可以的,但是JavaScript会等到服务器响应就绪后才继续执行.如果服务器繁忙或者缓慢,应用程序会挂起或者停止. 当async=false 时，不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可

1 xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
2 xmlhttp.send();
3 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

五、来自服务器的响应

　　如果需要获取来自服务器的响应，请使用XMLHTTP Response对象的responseText或者responseXML属性。

1 属性：responseText    描述：获取字符串形式的响应数据
2 属性：responseXML    描述：获取XML形式的响应数据

猜你喜欢