Ajax异步提交笔记

Posted 好奇害死猫+1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax异步提交笔记相关的知识,希望对你有一定的参考价值。

1,Ajax
  AJAX = 异步 javascript 和 XML。 Asynchronous JavaScript and XML
  XMLHttpRequest 对象 (异步的与服务器交换数据)
  JavaScript/DOM (信息显示/交互)
  CSS (给数据定义样式)
  XML (作为转换数据的格式)

2,XMLHttpRequest
  创建XMLHttpRequest的语法
  IE5和IE6:
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  新版本IE和其他浏览器 IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  ====>

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

3,XMLHttpRequest 常用的方法和属性
方法:
  open() : 用于创建一个新的HTTP请求,并指定此请求的方法,URL,是否异步提交及验证信息
  send() : 发送请求到服务器端
  abort() : 取消当前请求
  setRequestHeader() : 单独指定请求的某个HTTP头
  getResponseHeader() : 从响应中获取指定的HTTP头
  getAllResponseHeaders() : 获取响应的所有HTTP头
属性:
  readyState : 返回请求的当前状态, readyState 常用值0表示未初始化,1表示初始化,2表示发送数据,3表示数据传送中,4表示数据接收完毕
  status : 返回当前请求的HTTP状态码, status常用值200表示正确返回,404表示找不到访问对象
  responseText : 以文本形式获取响应值
  responseXML : 以xml形式获取响应值,并且解析成DOM对象返回
  statusText : 返回当前请求的响应行状态
  onreadystatechange : 设置回调函数
4,向服务器发送请求
  xmlhttp.open("GET","ajax_info.txt",true);
  xmlhttp.send();
  open(method,url,async)
  method:请求的类型;GET 或 POST
  url:文件在服务器上的位置
  async:true(异步)或 false(同步)
  send(string)
  string:仅用于 POST 请求 ,GET请求为空或null
GET 还是 POST?
以下情况中,请使用 POST 请求:
  无法使用缓存文件(更新服务器上的文件或数据库)
  向服务器发送大量数据(POST 没有数据量限制)
  发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
get 请求:
  xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
  xmlhttp.send();
post 请求:
  xmlhttp.open("POST","/try/ajax/demo_post.php",true);
  xmlhttp.send();
如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
  xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("fname=Henry&lname=Ford");
5,AJAX - 服务器 响应
  responseText 获得字符串形式的响应数据。
  responseXML 获得 XML 形式的响应数据。
  1): responseText 属性
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
  2): responseXML 属性

  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    var xmlDoc=xmlhttp.responseXML;
    var txt="";
  if(xmlDoc){
    var x=xmlDoc.getElementsByTagName("ARTIST");
    if (x.length > 0){
      for (i=0;i<x.length;i++){
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
    }
  }
  document.getElementById("myDiv").innerHTML=txt;
  }

  XmlDocument 对象的常用属性
  attributes : 当前节点的属性集合
  childNodes : 当前节点的所有子节点
  firstChild : 节点的第一个子节点
  XmlDocument 对象的常用方法
  getElementsByTagName() : 用来获取指定节点名的节点对象集合,参数为节点名称字符串
  selectSingleNode() : 用来获取符合条件的第一个节点对象
  selectNodes() : 用来获取符合条件的节点对象集合

6,原生ajax

 1    <script type="text/javascript">
 2        function ajax(){
 3            var username=document.getElementsByName("username")[0].value;
 4            //发送Ajax请求
 5            //1.创建XMLHttpRequest对象
 6            var xmlHttpRequest=createXMLHttpRequest();
 7            //2.设置回调函数,用来返回数据
 8            xmlHttpRequest.onreadystatechange=callBack;
 9            //3.初始化xmlHttpRequest
10            xmlHttpRequest.open("GET","UserServlet?username="+username,true);
11            //4.发送请求
12            xmlHttpRequest.send(null);    
13            //回调函数
14            function callBack(){
15                var data=xmlHttpRequest.responseText;
16                var sp=document.getElementById("sp");
17                if(data=="true"){
18                    sp.innerHTML="用户名可用";
19                }else{
20                    sp.innerHTML="该用户已存在";
21                }
22            }
23        }   
24        function createXMLHttpRequest(){
25            //1.判断浏览器类型是否是IE6以上或者其他浏览器
26            if(window.XMLHttpRequest){
27                return new XMLHttpRequest();
28            }else{
29                //如果为flase,则为IE6及以下
30                return new ActiveXObject();
31            }
32        }
33    </script>

   //接收方法 

    String username=request.getParameter("username");
    System.out.println(username);
    //实例化PrintWriter对象返回数据
    PrintWriter out=response.getWriter();
    if("admin".equals(username)){
      out.print(false);
    }else{
      out.print(true);
    }

7,jQuery简化Ajax使用

 1     <script type="text/javascript">
 2         $(function(){
 3             $("#username").blur(function(){
 4                 var username=document.getElementsByName("username")[0].value;
 5                 //发送Ajax
 6                 $.ajax({
 7                     url:"UserServlet",
 8                     type:"GET",
 9                     data:"username="+username,
10                     dataType:"text",
11                     success:callBack
12                 });
13                 function callBack(data){
14                     if(data=="true"){
15                         $("#sp").html("该用户名可用");
16                     }else{
17                         $("#sp").html("该用户名以被使用");
18                     }
19                 }
20             });
21         });
22     </script>

8,简化

 1 //第一个参数是url,第二个是发送的数据,第三个回调函数,最后一个是回调类型,数据的发送形式为get提交  
 2 $.get("UserServlet","username="+username+"&message="+message,callBack,"json");
 3 //发送请求的方式变成post提交
 4 $.post("UserServlet",{username:username,message:message},callBack,"json");
 5 //当请求方式为get,回调json时候可以使用这种
 6 $.getJSON("UserServlet",{username:username,message:message},callBack);
 7     
 8     //fastJSON
 9     String json=JSON.toJSONString(list,true);
10     System.out.println(json);
11     response.setContentType("text/html;charset=utf-8");
12     PrintWriter out =response.getWriter();
13     out.print(json);
14     out.flush();

9,提交form表单

<script type="text/javascript">
     $(function(){ 
         $("#btn").click(function(){
             /* //将表单数据序列化
             var form=$("#form").serializeArray();
             //将表单数据转化为name=value的形式
             var formString=$.param(form); */
             var formString=$("#form").serialize();
             $.post("UserServlet",formString,callBack,"JSON");
             function callBack(data){
                 $("#div").append("<ul><li>用户名:"+data.username+"</li><li>密码:"+data.password+"</li><li>性别:"
                         +data.gender+"</li><li>年龄:"+data.age+"</li><li>电话:"+data.phone+"</li><li>地址:"
                         +data.address+"</li></ul>");
             } 
         });
     });
</script>
</head>
<body>
   <form action="" id="form">
       <span>用户名:</span><input type="text" name="username"><br>
       <span>密码:</span><input type="password" name="password"><br>
       <span>性别:</span><input type="radio" name="gender" value="男" checked="checked">&nbsp;
                         <input type="radio" name="gender" value="女"><br>
      <span>年龄:</span><input type="text" name="age"><br>
      <span>电话:</span><input type="text" name="phone"><br>
      <span>地址:</span><textarea rows="4" cols="50" name="address"></textarea><br>
      <input type="button" value="取值" id="btn">
   </form>
   <div id="div">
   </div>
</body>

    User user=new User(username, password, gender, age, phone, address);
    //转化为json数据
    String json=JSON.toJSONString(user);
    response.setContentType("text/html;charset=utf-8");
    PrintWriter out=response.getWriter();
    out.print(json);
    out.flush();    

 











































































以上是关于Ajax异步提交笔记的主要内容,如果未能解决你的问题,请参考以下文章

ajax学习笔记

Ajax笔记

慕课网 Ajax笔记

AJAX学习笔记

form表单submit提交内容,跟ajax异步提交form表单的区别,

AJAX学习笔记