zoukankan      html  css  js  c++  java
  • 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实现的方式:

  • 相关阅读:
    单例
    ASIHttpRequest加载网络数据和上传数据功能
    JSONModel
    KVC/KVO
    C中的动态内存分配和释放(free)
    IOS开发中Xcode一些使用技巧,快捷键的使用
    Struts2文件上传
    Struts2的输入校验
    struts2类型转换中的错误处理
    struts2自定义类型转换器
  • 原文地址:https://www.cnblogs.com/pythonkids/p/8256841.html
Copyright © 2011-2022 走看看