ajax的实现

一、通过JavaScript实现ajax的步骤：必须通过以下4步完成

step1：通过XMLHttpRequest()创建核心对象
　　exp：xmlHttp=
step2：通过核心对象的open()函数方法——创建连接对象
　　exp：xmlHttp.open("GET", "/ajax_receive/", true);
step3：核心对象通过send()函数——发送请求体内容
　　exp：xmlHttp.send(null);
step4:服务端（服务端views内对应的函数）相应以后，返回内容

　　exp：xmlhttp.onreadystatechange()

1.1HTML中get请求:

 1 <body>
 2 <button onclick="func1()">ajax提交</button>
 3 </body>
 4 <script>
 5     function func1() {
 6         function createXMLHttpRequest(){
 7         var xmlHttp;
 8         // 适用于大多数浏览器，以及IE7和IE更高版本
 9         try{
10             xmlHttp = new XMLHttpRequest();
11         } catch (e) {
12             // 适用于IE6
13             try {
14                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
15             } catch (e) {
16                 // 适用于IE5.5，以及IE更早版本
17                 try{
18                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
19                 } catch (e){}
20             }
21         }
22         return xmlHttp;
23 
24     }//#创建XMLHttpRequest()
25         var xmlhttp=createXMLHttpRequest();//#step1
26         xmlhttp.onreadystatechange=function () {
27             //alert(xmlhttp.status);
28             alert(xmlhttp.readyState)
29             if(xmlhttp.readyState==4 && xmlhttp.status==200){
30                 var msg=xmlhttp.responseText
31                 alert(msg)
32             }
33 
34         }//setp4:
35         xmlhttp.open("GET","/ajax_receive/",true);//#setp2:
36         xmlhttp.send(null);//#step3
37 
38     }//给func1写函数执行的方法，点击按钮执行ajax

1.2Django——views:

1 def index(request):
2     return render(request,"index.html")
3 
4 def ajax_receive(request):
5    7     return HttpResponse("GET方式发送成功")

1.3配置视图函数

1 from app01 import views
2 
3 urlpatterns = [
4     url(r'^admin/', admin.site.urls),
5     url(r'^index/',views.index),
6     url(r'^ajax_receive',views.ajax_receive)
7 ]

2.1HTML中POST请求:

 function func1() {
        function createXMLHttpRequest(){
        var xmlHttp;
        // 适用于大多数浏览器，以及IE7和IE更高版本
        try{
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // 适用于IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                // 适用于IE5.5，以及IE更早版本
                try{
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){}
            }
        }
        return xmlHttp;

    }//#创建XMLHttpRequest()
        var xmlhttp=createXMLHttpRequest();//#step1
        xmlhttp.onreadystatechange=function () {
            //alert(xmlhttp.status);
            alert(xmlhttp.readyState)
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                var msg=xmlhttp.responseText
                alert(msg)
            }

        }//setp4:
        xmlhttp.open("POST","/ajax_receive/",true);//#setp2:
        xmlhttp.send("name=zxq");//#step4

    }//给func1写函数执行的方法，点击按钮执行ajax

View Code

2.2Django——views:

1 def index(request):
2     return render(request,"index.html")
3 
4 def ajax_receive(request):
5     if request.method=="POST":
6         print("requeset:POST",request.POST)
7     return HttpResponse("POST方式发送成功")

2.3配置视图函数

1 1 from app01 import views
2 2 
3 3 urlpatterns = [
4 4     url(r'^admin/', admin.site.urls),
5 5     url(r'^index/',views.index),
6 6     url(r'^ajax_receive',views.ajax_receive)
7 7 ]

二、基于jQuery的ajax实现的方式：