前端知识之ajax-----ajax的数据传递

爱被打了一巴掌 2022-06-08 03:11 649阅读 0赞

这一篇主要是讲ajax的数据传递方式

# 1.什么是ajax #

太深入的暂时不说，ajax是异步的 JavaScript 和 XML，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。  
　　  
通俗点说，就是不去刷新页面，页面的数据也能改变。

##### 它有以下这些特点： #####

*  无刷新更新页面
 *  按需获取数据，减轻服务器负担
 *  可以实现富客户端
 *  基于标准化和广泛使用的技术
 *  进一步实现页面和逻辑分离
 *  连续动态的体验

##### 既然是交换数据，那么他是怎么和后台实现数据交换的呢？ #####

Ajax的原理在于使用**JS对象XMLHttpRequest**，向服务器发送请求，并且能够处理服务器响应。避免了阻塞用户的动作。  
直接利用客户端脚本与服务器交换数据，而Web页面无需重新加载，Web页面的内容也由客户端脚本动态实现。

通俗点说，当正常的同步响应，当我们想服务端发送数据后，浏览器就会完全丢弃现在的页面，在服务器响应之前，页面是完全空白的，用户的动作中断。  
　　而异步访问的特点是请求无需等待，不会互相影响，页面不会完全刷新，即使服务器没有应答我们依然可以进行其他的操作。

**正常情况下服务器会相应一个HTML页面，然后浏览器下载打开这个页面，完成一个视图的生成。**

而AJAX仅仅是回应一些数据，在ajax应用初始化时就加载了大量JavaScript代码，这些代码已经包含了部分业务逻辑，在后台自动运行，处理部分逻辑，异步提交请求，响应数据，动态更新。此时可以把一个页面看成一个应用，在应用中展现数据而已。  
　　此时的ajax应用自带逻辑，无需使用session，只需修改JS变量，直到最后需要持久化时才会利用JS将请求提交给服务器。

##### 另外要在这里扯一个不是问题的问题：js原生的ajax与jquery的ajax有什么区别呢？ #####

简单来说，jquery对AJAX支持，它是对原生ajax的一种封装，要弄清楚，我们就需要了解原生的ajax，下面开始一步步的来梳理它。

# 2.ajax的详细梳理 #

## 1.Ajax的具体流程 ##

先看一段设计案例：

/** * 构建XMLHttpRequest对象并请求服务器 * @param reqType：请求类型（GET或POST） * @param url：服务器地址 * @param async：是否异步请求 * @param resFun：响应的回调函数 * @param parameter :请求参数 * @return :XMLHttpRequest对象 */
    function httpRequest(reqType,url,async,resFun,parameter){    
        var request = null;
        if( window.XMLHttpRequest ){        //非IE浏览器，创建XMLHttpRequest对象
            request = new XMLHttpRequest();
        }else if( window.ActiveXObject ){   //IE浏览器，创建ActiveXObject 对象
            var arrSignatures = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP", "Microsoft.XMLHTTP", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP"];       
            for( var i = 0; i < arrSignatures.length; i++ ){
                request = new ActiveXObject( arrSignatures[i] );
                if( request || typeof( request ) == "object" )
                    break;
            }
        }
        if( request || typeof( request ) == "object" ){
            if(reqType.toLowerCase()=="post"){      //以POST方式提交
                request.open(reqType, url, true);   //打开服务器连接
                //设置MIME类型
                request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                request.onreadystatechange = resFun;//设置处理响应的回调函数
                parameter = encodeURI(parameter);   //将参数字符串进行编码
                request.send(parameter);            //发送请求
            }
            else{                                   //以GET方式提交
                url = url+"?"+parameter;            //重新设置URL，GET方式需要在URL中附带请求参数
                request.open(reqType, url, true);   //打开服务器连接
                request.onreadystatechange = resFun;//响应回调函数
                request.send(null);                 //发送请求
            }
        }
        else{
            alert( "该浏览器不支持Ajax！" );
        }   
        return request;
    }
    
    
    //以及他的调用函数
    <script language="javascript">
    var saveReq = false;
    //保存 草稿 
    function autoSave(){ 
        var title=document.getElementById("title").value;
        var content=document.getElementById("content").value;
        if(title!="") {     //当文章标题不为空时
            var url = "saveDraft.jsp";
            var param = "title="+title+"&content="+content;
            //调用编写的Ajax请求方法 
            saveReq = httpRequest("post",url,true,callbackFunc_save,param);
        }
    }
    //回调函数 
    function callbackFunc_save(){ 
        if(saveReq.readyState == 4){
            if(saveReq.status == 200){
                document.getElementById("sysTip").innerHTML = saveReq.responseText;
            }
        }
    }
    var selectReq = false;
    function selectArticle(){ 
            var url = "getDraft.jsp";
            var param = "nocache="+new Date().getTime();
            selectReq = httpRequest("get",url,true,callbackFunc_select,param);
    }
    function callbackFunc_select(){ 
        if(selectReq.readyState == 4){
            if(selectReq.status == 200){
                document.getElementById("draftBox").innerHTML = selectReq.responseText;
            }
        }
    }
    
    </script>

//首先，我们要知道AJAX是前端语言，他的作用是通过前端代码与后端进行异步调用

Created with Raphaël 2.1.2判断是否需要使用ajax对后端进行异步请求需要，调用httpRequest（）方法创建XMLHttpRequest对象或者创建ActiveXObject 对象 设置相关参数（请求参数，编码），设置回调函数，发送请求判断执行情况，调用回调函数

那么，我们具体分析一下里面的一些对象和方法：

## 2.Open（）方法 ##

//语法
    open(method, url, async, username, password)

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>method</td> 
   <td align="center">该参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。( 大小写不敏感。POST用”POST”方式发送数据,可以大到4MBGET用”GET”方式发送数据,只能256KB。如果请求带有参数的化实用POST方式，POST方式将参数放置在页面的隐藏控件内没有参数使用GET方式对于请求的页面在中途可能发生更改的，也最好用POST方式)</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td align="center">url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。</td> 
  </tr> 
  <tr> 
   <td>async</td> 
   <td align="center">async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。</td> 
  </tr> 
  <tr> 
   <td>username 和 password</td> 
   <td align="center">该参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。</td> 
  </tr> 
 </tbody> 
</table>

#### //这里对比一下send（）方法 ####

//send方法也是 XMLHttpRequest 对象的一个方法

send(string)
    //案例：
     xmlhttp.send("fname=Henry&lname=Ford");

将请求发送到服务器。（string：仅用于 POST 请求）  
//send仅仅只是发送

## 3.接收响应 ##

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">描述</th> 
   <th align="center">特点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>responseText</td> 
   <td align="center">获得字符串形式的响应数据。</td> 
   <td align="center">如果来自服务器的响应并非 XML，请使用 responseText 属性。</td> 
  </tr> 
  <tr> 
   <td>responseXML</td> 
   <td align="center">获得 XML 形式的响应数据。</td> 
   <td align="center">如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性</td> 
  </tr> 
 </tbody> 
</table>

//responseText:
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    
    //responseXML   
    xmlDoc=xmlhttp.responseXML; 
    txt="";
     x=xmlDoc.getElementsByTagName("ARTIST");
      for (i=0;i<x.length;i++) { 
       txt=txt + x[i].childNodes[0].nodeValue + "<br>"; 
       } 
       document.getElementById("myDiv").innerHTML=txt;

## 4.xmlHTTPRequest补充 ##

setRequestHeader(header,value) 向请求添加 HTTP 头。  
• header: 规定头的名称  
• value: 规定头的值

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

下面是 XMLHttpRequest 对象的三个重要的属性：

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

# 3.JQuery的ajax封装 #

## 1.大概函数列表 ##

#### jQuery Ajax 操作函数 ####

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>jQuery.ajax()</td> 
   <td align="center">执行异步 HTTP (Ajax) 请求。</td> 
  </tr> 
  <tr> 
   <td>.ajaxComplete()</td> 
   <td align="center">当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。</td> 
  </tr> 
  <tr> 
   <td>.ajaxError()</td> 
   <td align="center">当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。</td> 
  </tr> 
  <tr> 
   <td>.ajaxSend()</td> 
   <td align="center">在 Ajax 请求发送之前显示一条消息。</td> 
  </tr> 
  <tr> 
   <td>jQuery.ajaxSetup()</td> 
   <td align="center">设置将来的 Ajax 请求的默认值。</td> 
  </tr> 
  <tr> 
   <td>.ajaxStart()</td> 
   <td align="center">当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。</td> 
  </tr> 
  <tr> 
   <td>.ajaxStop()</td> 
   <td align="center">当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。</td> 
  </tr> 
  <tr> 
   <td>.ajaxSuccess()</td> 
   <td align="center">当 Ajax 请求成功完成时显示一条消息。</td> 
  </tr> 
  <tr> 
   <td>jQuery.get()</td> 
   <td align="center">使用 HTTP GET 请求从服务器加载数据。</td> 
  </tr> 
  <tr> 
   <td>jQuery.getJSON()</td> 
   <td align="center">使用 HTTP GET 请求从服务器加载 JSON 编码数据。</td> 
  </tr> 
  <tr> 
   <td>jQuery.getScript()</td> 
   <td align="center">使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。</td> 
  </tr> 
  <tr> 
   <td>.load()</td> 
   <td align="center">从服务器加载数据，然后把返回到 HTML 放入匹配元素。</td> 
  </tr> 
  <tr> 
   <td>jQuery.param()</td> 
   <td align="center">创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。</td> 
  </tr> 
  <tr> 
   <td>jQuery.post()</td> 
   <td align="center">使用 HTTP POST 请求从服务器加载数据。</td> 
  </tr> 
  <tr> 
   <td>.serialize()</td> 
   <td align="center">将表单内容序列化为字符串。</td> 
  </tr> 
  <tr> 
   <td>.serializeArray()</td> 
   <td align="center">序列化表单元素，返回 JSON 数据结构数据。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$.ajax()</td> 
   <td align="center">执行异步 AJAX 请求</td> 
  </tr> 
  <tr> 
   <td>$.ajaxPrefilter()</td> 
   <td align="center">在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项</td> 
  </tr> 
  <tr> 
   <td>$.ajaxSetup()</td> 
   <td align="center">为将来的 AJAX 请求设置默认值</td> 
  </tr> 
  <tr> 
   <td>$.ajaxTransport()</td> 
   <td align="center">创建处理 Ajax 数据实际传送的对象</td> 
  </tr> 
  <tr> 
   <td>$.get()</td> 
   <td align="center">使用 AJAX 的 HTTP GET 请求从服务器加载数据</td> 
  </tr> 
  <tr> 
   <td>$.getJSON()</td> 
   <td align="center">使用 HTTP GET 请求从服务器加载 JSON 编码的数据</td> 
  </tr> 
  <tr> 
   <td>$.getScript()</td> 
   <td align="center">使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript</td> 
  </tr> 
  <tr> 
   <td>$.param()</td> 
   <td align="center">创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）</td> 
  </tr> 
  <tr> 
   <td>$.post()</td> 
   <td align="center">使用 AJAX 的 HTTP POST 请求从服务器加载数据</td> 
  </tr> 
  <tr> 
   <td>ajaxComplete()</td> 
   <td align="center">规定 AJAX 请求完成时运行的函数</td> 
  </tr> 
  <tr> 
   <td>ajaxError()</td> 
   <td align="center">规定 AJAX 请求失败时运行的函数</td> 
  </tr> 
  <tr> 
   <td>ajaxSend()</td> 
   <td align="center">规定 AJAX 请求发送之前运行的函数</td> 
  </tr> 
  <tr> 
   <td>ajaxStart()</td> 
   <td align="center">规定第一个 AJAX 请求开始时运行的函数</td> 
  </tr> 
  <tr> 
   <td>ajaxStop()</td> 
   <td align="center">规定所有的 AJAX 请求完成时运行的函数</td> 
  </tr> 
  <tr> 
   <td>ajaxSuccess()</td> 
   <td align="center">规定 AJAX 请求成功完成时运行的函数</td> 
  </tr> 
  <tr> 
   <td>load()</td> 
   <td align="center">从服务器加载数据，并把返回的数据放置到指定的元素中</td> 
  </tr> 
  <tr> 
   <td>serialize()</td> 
   <td align="center">编码表单元素集为字符串以便提交</td> 
  </tr> 
  <tr> 
   <td>serializeArray()</td> 
   <td align="center">编码表单元素集为 names 和 values 的数组</td> 
  </tr> 
 </tbody> 
</table>

## 2.常用使用类简介 ##

常用的一般有三个：  
$ajax,$post，$get三种

$.ajax({name:value, name:value, ... })
    $(selector).post(URL,data,function(data,status,xhr),dataType)
    $.get(URL,data,function(data,status,xhr),dataType)
    
    //用get举例
    //请求 "test.php"，但是忽略返回结果：
    $.get("test.php");
    
    //请求 "test.php" 并连同请求发送一些额外的数据（忽略返回结果）：
    $.get("test.php", { name:"Donald", town:"Ducktown" });
    
    //请求 "test.php" 并传递数据数组到服务器（忽略返回结果）：
    $.get("test.php", { 'colors[]' : ["Red","Green","Blue"] });
    
    //请求 "test.php" 并提醒请求的结果：
    $.get("test.php", function(data){
    alert("Data: " + data);
    });

#### ajax（） ####

下面的表格中列出了可能的名称/值：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th align="center">值/描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>async</td> 
   <td align="center">布尔值，表示请求是否异步处理。默认是 true。</td> 
  </tr> 
  <tr> 
   <td>beforeSend(xhr)</td> 
   <td align="center">发送请求前运行的函数。</td> 
  </tr> 
  <tr> 
   <td>cache</td> 
   <td align="center">布尔值，表示浏览器是否缓存被请求页面。默认是 true。</td> 
  </tr> 
  <tr> 
   <td>complete(xhr,status)</td> 
   <td align="center">请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。</td> 
  </tr> 
  <tr> 
   <td>contentType</td> 
   <td align="center">发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”。</td> 
  </tr> 
  <tr> 
   <td>context</td> 
   <td align="center">为所有 AJAX 相关的回调函数规定 “this” 值。</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td align="center">规定要发送到服务器的数据。</td> 
  </tr> 
  <tr> 
   <td>dataFilter(data,type)</td> 
   <td align="center">用于处理 XMLHttpRequest 原始响应数据的函数。</td> 
  </tr> 
  <tr> 
   <td>dataType</td> 
   <td align="center">预期的服务器响应的数据类型。</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="center">要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="center">xml：返回XML文档，可用JQuery处理。</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="center">html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="center">script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="center">json：返回JSON数据。</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="center">jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="center">text：返回纯文本字符串。</td> 
  </tr> 
  <tr> 
   <td>error(xhr,status,error)</td> 
   <td align="center">如果请求失败要运行的函数。</td> 
  </tr> 
  <tr> 
   <td>global</td> 
   <td align="center">布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。</td> 
  </tr> 
  <tr> 
   <td>ifModified</td> 
   <td align="center">布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。</td> 
  </tr> 
  <tr> 
   <td>jsonp</td> 
   <td align="center">在一个 jsonp 中重写回调函数的字符串。</td> 
  </tr> 
  <tr> 
   <td>jsonpCallback</td> 
   <td align="center">在一个 jsonp 中规定回调函数的名称。</td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td align="center">规定在 HTTP 访问认证请求中使用的密码。</td> 
  </tr> 
  <tr> 
   <td>processData</td> 
   <td align="center">布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。</td> 
  </tr> 
  <tr> 
   <td>scriptCharset</td> 
   <td align="center">规定请求的字符集。</td> 
  </tr> 
  <tr> 
   <td>success(result,status,xhr)</td> 
   <td align="center">当请求成功时运行的函数。</td> 
  </tr> 
  <tr> 
   <td>timeout</td> 
   <td align="center">设置本地的请求超时时间（以毫秒计）。要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。</td> 
  </tr> 
  <tr> 
   <td>traditional</td> 
   <td align="center">布尔值，规定是否使用参数序列化的传统样式。</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td align="center">规定请求的类型（GET 或 POST）。要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td align="center">规定发送请求的 URL。默认是当前页面。要求为String类型的参数，（默认为当前页地址）发送请求的地址。</td> 
  </tr> 
  <tr> 
   <td>username</td> 
   <td align="center">规定在 HTTP 访问认证请求中使用的用户名。</td> 
  </tr> 
  <tr> 
   <td>xhr</td> 
   <td align="center">用于创建 XMLHttpRequest 对象的函数。</td> 
  </tr> 
 </tbody> 
</table>

post和get与这个类似，就不详细说了

## 3.常用使用类简介 ##

具体实例：

# 4.总结 #

AJAX是一种前端技术，掌握具体的流程之后还是很好理解的

参考：  
菜鸟教程