zoukankan      html  css  js  c++  java
  • 原生JS操作AJAX

    1,get方式的AJAX

     1 function sendAjaxReq()
     2 {
     3     //1,创建ajax引擎 XMLHttpRequest对象
     4     var req = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP");
     5     //2,打开一个请求,此时未发送请求,定义好发送请求的方式以及是否需要携带数据 是否同步异步
     6     req.open("get", "testAjax?phone=iphone&apple=pen");
     7     //3,准备好处理服务器返回的数据
     8     req.onreadystatechange = function()
     9     {
    10         if(req.readyState == 4)
    11         {
    12             //返回json数据的解析格式
    13             var str = req.responseText;
    14             eval("var obj=" + str);
    15             alert(obj.name);
    16             //返回xml的解析格式
    17             var data = req.reponseXML.getElementsByTagName("bigName")[0].first(child.data);
    18         }
    19     }
    20     //4,发送请求,如果是在火狐下,使用get方式发送ajax请求,send的时候括号写上null
    21     req.send(null);
    22 }

    2,post方式AJAX

     1 //使用post传参,需要携带一个请求头模拟表单提交
     2 function sendAjax()
     3 {
     4     var request = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP"); 
     5     request.open("post", "testAjax?phone=1", true)
     6     request.onreadystatechange = function()
     7     {
     8         if(request.readyState == 4)
     9         {
    10             if(request.status == 200)
    11             {
    12                 var str = request.responseText;
    13                 alert(str); 
    14             }
    15             else if(request.status == 404)
    16             {
    17                 alert("找不到资源");
    18             }
    19         }
    20     }
    21     request.setRequestHeader("content-type", "application/x-www-form-urlencoded")
    22     request.send("phone=");
    23 }

    3,封装了get和post的AJAX

     1 function sendAjaxReq(method,url,param,fun200,fun404,fun500)
     2  {
     3      var req;
     4       if(window.XMLHttpRequest)
     5       {
     6           req = new XMLHttpRequest();    
     7       }
     8           else if(window.ActiveXObject)
     9       {
    10          req = new ActiveXObject("Msxml2.XMLHTTP");
    11       }
    12       req.open(method,url);
    13       req.onreadystatechange = function()
    14       {
    15           if(req.readyState == 4)
    16           {
    17               if(req.status == 200)
    18               {
    19                   if(fun200)
    20                   {
    21                      fun200(req.responseText);
    22                   }
    23               }
    24               else if(req.status == 404)
    25               {
    26                   if(fun404)
    27                   {
    28                       fun404();
    29                   }
    30               }
    31               else if(req.status == 500)
    32               {
    33                   if(fun500)
    34                   {
    35                       fun500();
    36                   }
    37               }
    38           }
    39       }
    40       if(method.toUpperCase() == "GET")
    41       {
    42           req.send(null);
    43       }
    44       else if(method.toUpperCase() == "POST")
    45       {
    46           req.setRequestHeader("context-type", "application/x-www-form-urlencoded");
    47           req.send(param);
    48       }
    49   }
    50 
    51 function testAjax()
    52 {
    53     sendAjaxReq("get","ajaxServlet?uname=1&password=2",null,function(data)
    54     {
    55         eval("var obj="+data);
    56         alert(obj.data);
    57     });
    58 }

  • 相关阅读:
    Java引用类型转换
    SWFUpload多文件上传使用指南
    SpringMVC中与Spring相关的@注解
    三层——c#版
    初识三层
    vb.net 总结
    设计模式总结
    设计模式系列——装饰模式
    设计模式系列——策略模式
    设计模式系列——简单工厂模式
  • 原文地址:https://www.cnblogs.com/guanghe/p/5993220.html
Copyright © 2011-2022 走看看