初学者必看的Ajax总结篇

var xhr = new XMLHttpRequest();

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

function createRequest (){
 try {
 xhr = new XMLHttpRequest();
 }catch (tryMS){
 try {
 xhr = new ActiveXObject("Msxm12.XMLHTTP");
 } catch (otherMS) {
 try {
 xhr = new ActiveXObject("Microsoft.XMLHTTP");
 }catch (failed) {
 xhr = null;
 }
 }
 }
 return xhr;
}

xhr.open(method,url,async);

xhr.open("GET",demo.php"htmlcode">

xhr.open("POST",demo.php,true);


第二个参数是要作为请求发送目标的URL。
第三个参数是true或false，表示请求是以异步还是同步的模式发出。（默认为true，一般不建议为false）



  
false：同步模式发出的请求会暂停所有javascript代码的执行，知道服务器获得响应为止，如果浏览器在连接网络时或者在下载文件时出了故障，页面就会一直挂起。
  
true：异步模式发出的请求，请求对象收发数据的同时，浏览器可以继续加载页面，执行其他javascript代码

3、发送请求


xhr.send();


一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null或为空。
GET请求：


xhr.open("GET",demo.php"htmlcode">

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.sen


4、处理响应


xhr.onreadystatechange = function(){
 if(xhr.readyState == 4 && xhr.status == 200){
 console.log(xhr.responseText);
 }
}


onreadystatechange ：当处理过程发生变化的时候执行下面的函数
readyState ：ajax处理过程
      0：请求未初始化（还没有调用 open() ）。


      1：请求已经建立，但是还没有发送（还没有调用 send() ）。


      2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。


      3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。


      4：响应已完成；您可以获取并使用服务器的响应了。


status属性：

  
200:”OK”

  
  
404: 未找到页面

responseText：获得字符串形式的响应数据
responseXML：获得 XML形式的响应数据


对象转换为JSON格式使用JSON.stringify


json转换为对象格式用JSON.parse()


返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象
从服务器传回的数据是json格式，这里做一个例子说明，如何利用
1、首先需要从XMLHttpRequest对象取回数据这是一个JSON串，把它转换为真正的JavaScript对象。使用JSON.parse(xhr.responseText)转化为JSON对象


2、遍历得到的数组，向DOM中添加新元素


function example(responseText){
var saleDiv= document.getElementById("sales");
var sales = JSON.parse(responseText);
 for(var i=0;i<sales.length;i++){
 var sale = sales[i];
 var div = document.createElement("div");
 div.setAttribute("class","salseItem");
 div.innerHTML = sale.name + sale.sales;
 salseDiv.appendChild(div);
 }
}



5、完整例子


var xhr = false;
 if(XMLHttpRequest){
 xhr = new XMLHttpRequest();
 }else{
 xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
if(xhr) {//如果xhr创建失败，还是原来的false
 xhr.open("GET","./data.json",true);
 xhr.send();
 xhr.onreadystatechange = function(){
 if(xhr.readyState == 4 && xhr.status == 200){
 console.log(JSON.parse(xhr.responseText).name);
 }
 }
}


data.json


{
 "name":"tsrot",
 "age":24
}


这个过程是一定要记在脑子里的


function ajax(url, success, fail){
 // 1. 创建连接
 var xhr = null;
 xhr = new XMLHttpRequest()
 // 2. 连接服务器
 xhr.open('get', url, true)
 // 3. 发送请求
 xhr.send(null);
 // 4. 接受请求
 xhr.onreadystatechange = function(){
 if(xhr.readyState == 4){
 if(xhr.status == 200){
 success(xhr.responseText);
 } else { // fail
 fail && fail(xhr.status);
 }
 }
 }
}


XMLHttpRequest 在异步请求远程数据时的工作流程
谈谈JSONP
要访问web服务器的数据除了XMLHttpRequest外还有一种方法是JSONP


如果HTML和JavaScript与数据同时在同一个机器上，就可以使用XMLHttpRequest
什么是JSONP？
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）


JSONP有什么用？


由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求


如何使用JSONP？
在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数

用XMLHttpRequest时，我们得到一个字符串；要用JSON.parse把字符串转化成对象，使用jsonp时，script标志会解析并执行返回的代码，等我们处理数据时，已经是一个JavaScript对象了
简单实例


<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<script type="text/javascript"> 
 function jsonpCallback(result) { 
 alert(result.a); 
 alert(result.b); 
 alert(result.c); 
 for(var i in result) { 
 alert(i+":"+result[i]);//循环输出a:1,b:2,etc. 
 } 
 } 
</script> 
<script type="text/javascript" src="/UploadFiles/2021-04-02/services.php">

注意浏览器的缓存问题



  
在末尾增加一个随机数可避免频繁请求同一个链接出现的缓存问题
  
`

三、 jQuery中的Ajax
jQuery中的ajax封装案例


//ajax请求后台数据
var btn = document.getElementsByTagName("input")[0];
btn.onclick = function(){
 
 ajax({//json格式
 type:"post",
 url:"post.php",
 data:"username=poetries&pwd=123456",
 asyn:true,
 success:function(data){
 document.write(data);
 }
 });
}
//封装ajax
function ajax(aJson){
 var ajx = null;
 var type = aJson.type || "get";
 var asyn = aJson.asyn || true;
 var url = aJson.url; // url 接收 传输位置
 var success = aJson.success;// success 接收 传输完成后的回调函数
 var data = aJson.data || '';// data 接收需要附带传输的数据
 
 if(window.XMLHttpRequest){//兼容处理
 ajx = new XMLHttpRequest();//一般浏览器
 }else
 {
 ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
 }
 if (type == "get" && data)
 {
 url +="/"+data+"&"+Math.random();
 }
 
 //初始化ajax请求
 ajx.open( type , url , asyn );
 //规定传输数据的格式
 ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
 //发送ajax请求（包括post数据的传输）
 type == "get" "请求出错"+ajx.status);
 
 }
 }
 
 }


jQuery中的Ajax的一些方法
jquery对Ajax操作进行了封装，在jquery中的$.ajax()方法属于最底层的方法，第2层是load() 、$.get() 、$.post();第3层是$.getScript() 、$.getJSON() ，第2层使用频率很高
load()方法
load()方法是jquery中最简单和常用的ajax方法，能载入远程HTML代码并插入DOM中 结构为：load(url,[data],[callback]) 
使用url参数指定选择符可以加载页面内的某些元素 load方法中url语法：url selector 注意：url和选择器之间有一个空格


传递方式


load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式传递，反之，采用POST


回调参数


必须在加载完成后才执行的操作，该函数有三个参数 分别代表请求返回的内容、请求状态、XMLHttpRequest对象

只要请求完成，回调函数就会被触发


$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
 //respnoseText 请求返回的内容
 //textStatus 请求状态 ：sucess、error、notmodified、timeout
 //XMLHttpRequest 
})


load方法参数




  
    
      参数名称
      类型
      说明
    
  
  
    
      url
      String
      请求HTML页面的URL地址
    
    
      data(可选)
      Object
      发送至服务器的key / value数据
    
    
      callback(可选)
      Function
      请求完成时的回调函数，无论是请求成功还是失败
    
  


$.get()和$.post()方法
load()方法通常用来从web服务器上获取静态的数据文件。在项目中需要传递一些参数给服务器中的页面，那么可以使用$.get()和$.post()或$.ajax()方法
注意：$.get()和$.post()方法是jquery中的全局函数
$.get()方法
$.get()方法使用GET方式来进行异步请求


结构为：$.get(url,[data],callback,type)


如果服务器返回的内容格式是xml文档，需要在服务器端设置Content-Type类型 代码如下： header("Content-Type:text/xml:charset=utf-8") //php


$.get()方法参数解析




  
    
      参数
      类型
      说明
    
  
  
    
      url
      String
      请求HTML页的地址
    
    
      data(可选)
      Object
      发送至服务器的key/ value 数据会作为QueryString附加到请求URL中
    
    
      callback(可选)
      Function
      载入成功的回调函数（只有当Response的返回状态是success才调用该方法）
    
    
      type(可选)
      String
      服务器返回内容的格式，包括xml、html、script、json、text和_default
    
  


$.post()方法
它与$.get()方法的结构和使用方式相同，有如下区别



  
GET请求会将参数跟张乃URL后进行传递，而POST请求则是作为Http消息的实体内容发送给web服务器，在ajax请求中，这种区别对用户不可见
  
GET方式对传输数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论不受限制）
  
GET方式请求的数据会被浏览器缓存起来，因此其他人可以从浏览器的历史纪录中读取这些数据，如：账号、密码。在某种情况下，GET方式会带来严重的安全问题，而POST相对来说可以避免这些问题
  
GET和POST方式传递的数据在服务端的获取也不相同。在PHP中，GET方式用$_GET[]获取；POST方式用$_POST[]获取;两种方式都可用$_REQUEST[]来获取

  

总结
使用load() 、$.get()和$.post()方法完成了一些常规的Ajax程序，如果还需要复杂的Ajax程序，就需要用到$.ajax()方式


$.ajax()方法
$.ajax()方法是jquery最底层的Ajax实现，它的结构为$.ajax(options)


该方法只有一个参数，但在这个对象里包含了$.ajax()方式所需要的请求设置以及回调函等信息，参数以key / value存在，所有参数都是可选的


$.ajax()方式常用参数解析




  
    
      参数
      类型
      说明
    
  
  
    
      url
      String
      (默认为当前页地址)发送请求的地址
    
    
      type
      String
      请求方式（POST或GET）默认为GET
    
    
      timeout
      Number
      设置请求超时时间（毫秒）
    
    
      dataType
      String
      预期服务器返回的类型。可用的类型如下

      

      xml:返回XML文档，可用jquery处理

      html:返回纯文本的HTML信息，包含的script标签也会在插入DOM时执行

      script：返回纯文本的javascript代码。不会自动缓存结果，除非设置cache参数。注意：在远程请求时，所有的POST请求都将转为GET请求

      json:返回JSON数据

      jsonp:JSONP格式，使用jsonp形式调用函数时，例如：myurl"color: #ff0000">总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

            
           
            上一篇：AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

            下一篇：ajax提交手机号去数据库验证并返回状态值