AJAX

AJAX

1. 概念:asynchronous javascript and xml 异步的js和 XML

2. 说明:AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

   AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

3. 使用步骤:ajax发送请求

   1. 创建XMLHttpRequest对象,这个对象就是ajax请求的核心,是ajax请求和响应的信息载体,但是不同浏览器创建方式不同
   2. 请求路径
   3. 使用open方法绑定发送请求
   4. 使用send()方法发送请求
   5. 获取服务器返回的字符串 xmlhttpRequestText
   6. 获取服务端返回的值,以xml对象的形式存储 xmlhttpRequest.responseXML\
   7. 使用w3c DOM节点树方法和属性对该xml文档对象进行检查和解析

4. 实例

   1. 创建对象

   var xmlhttp;
   if (window.XMLHttpRequest)
     {// code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
     }
   else
     {// code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
   

   2. 请求

   服务器发送请求
   xmlhttp.open("GET","test.txt",true);
   xmlhttp.send();
   
   open(method,url,async)      规定请求的类型、URL 以及是否异步处理请求。
   								method：请求的类型；GET 或 POST
   								url：文件在服务器上的位置
   								async：true（异步）或 false（同步）
   								
   send(string)                将请求发送到服务器。
   								string：仅用于 POST 请求
   

   1. GET 还是 POST？

   与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

   然而，在以下情况中，请使用 POST 请求：

   ​ 无法使用缓存文件（更新服务器上的文件或数据库）

   ​ 向服务器发送大量数据（POST 没有数据量限制）

   ​ 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

   2. GET请求

      1. 在上面的例子中，您可能得到的是缓存的结果。
         为了避免这种情况，请向 URL 添加一个唯一的 ID：
         xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
         xmlhttp.send();
         

      2. 如果您希望通过 GET 方法发送信息，请向 URL 添加信息：
         xmlhttp.open("GET","demo_get.asp?fname=bill&name=Gates",true);
         xmlhttp.send();
         

   3. POST请求

      1. xmlhttp.open("POST","demo_post.asp",true);
         xmlhttp.send();
         

      2. 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
         
         xmlhttp.open("POST","ajax_test.asp",true);
         xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
         xmlhttp.send("fname=Bill&lname=Gates");
         
         

         参数：
         1. 请求方式：GET、POST
         * get方式，请求参数在URL后边拼接。send方法为空参
         * post方式，请求参数在send方法中定义
         2. 请求的URL：
         3. 同步或异步请求：true（异步）或 false（同步

   4. 服务器响应

   5. 属性:responseText 获取字符串形式的响应数据

      ​ responseXML 获取XML形式的响应数据

   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   

​ 5. onreadystatechange 事件

​ 1.但请求被发送到服务器时,我们需要执行一些基于响应的任务,每当readyState改变时,就会触发onreadystatechange事件, readyState属性存有XMLHttpRequest的状态信息

XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status	200: "OK"404: 未找到页面

1. 在onreadystatechange事件中,我们规定当服务器响应已经做好被处理的准备时执行的任务

   当readyState等于4且状态为200时,表示响应已经就绪

   xmlhttp.onreadystatechange=function()
     {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
       document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
       }
     }
   
     	     . j
   
   

2. jquery AJAX实例

              			     1. $.ajax()
   
                         			     1. 语法:$.ajax({键值对});
   
                         			     2. 使用$.ajax()发送异步请求
   
                                    			     1. $.ajax({
   
                                               ​	url:"ajaxServlet",//请求路径
   
                                               ​	type:"POST",//请求方式
   
                                               ​	data:{"username":"jack","age":20},
   
                                               ​	success:function(data){
   
                                               ​		alert(data);
   
                                               ​	},//响应成功=后的回调函数
   
                                               ​	error.function(){
   
                                               ​		alert("出错啦.......")
   
                                               ​	},//表示如果请求响应出错,会执行回调函数
   
                                               ​	dataType:"text"//设置接受的响应数据的格式
   
                                               });
   
                                    			     2. $.get():发送get请求
   
                                               			     1. 语法:$.get(url,[data],[callback],[type])
   
                                                          			     1. 参数:
   
                                                                     url：请求路径
   
                                                                     data：请求参数
                                                                     callback：回调函数
                                                                     type：响应结果的类型
   
                                               			     2. $.post():发送post请求
   
                                                          			     1. 语法:$.post(url,[data],[callback],[type])
   
                                                                     1. 参数:
   
                                                                        url：请求路径
   
                                                                        data：请求参数
                                                                        callback：回调函数
                                                                        type：响应结果的类型	
   
   
   <script>
               $.ajax({
   			"url":"userServlet",        //要提交的URL路径
   			"type":"GET",				//发送请求的方式
   			"data":"name="+name,		//要发送到服务器的数据	
   			"dataType":"text",			//指定返回的数据格式
   			"success":"callback",		//响应成功后要执行的代码
   			"error":function(){			//请求失败后要执行的代码
   				alert("用户名验证时出现错误，请稍后再试");
   			}						
   		});
   		
   		//响应成功的回调函数
   		function callback(data){
   			if(data=="true"){
   				$("#nameDIV").html("用户名已被使用");
   			}else{
   				$("#nameDIV").html("用户名可以使用");
   			}
   		}
   </script>
   

案例: