Ajax语法

「爱情、让人受尽委屈。」 2023-07-19 12:26 42阅读 0赞

# **Ajax简介** #

AJAX =异步JavaScript和XML（异步的JavaScript和XML）  
AJAX不是新的编程语言，而是一种使用现有标准的新方法的  
AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面XMLHttpRequest对象所有现代浏览器均支持XMLHttpRequest对象（使用ActiveXObject的IE5和IE6）XMLHttpRequest用于在后台与的情况下  
AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行XMLHttpRequest是AJAX的基础。服务器交换数据这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新以便应对所有的现代浏览器，包括IE5和IE6，请检查浏览器是否支持XMLHttpRequest对象如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject：  
  
![20200401173613148.gif][]

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#869194;">1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11
</span></pre> </td> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#4d4d4c;">var xmlhttp; 
if（window.XMLHttpRequest）
  {IE7 +，Firefox，Chrome，Opera，Safari 
//创建XMLHttpRequest对象的语法：
  xmlhttp = new XMLHttpRequest（）; 
  } 
else 
  {IE6，IE5的代码
///旧版本的Internet Explorer（IE5和IE6）使用ActiveX对象：
  xmlhttp = new ActiveXObject（“ Microsoft.XMLHTTP”）; 
  }
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

向服务器发送请求  
将请求发送到服务器，我们使用XMLHttpRequest对象的open（）和send（）方法：

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#869194;">1 
2
</span></pre> </td> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#4d4d4c;">xmlhttp.open（“ GET”，“ ajax.txt”，true）; 
xmlhttp.send（）;
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

请求的网址，请求方法获取/发布  
提交请求的内容数据，请求对象等  
接收响应返回的内容  
发送Ajax请求的多个步骤：  
1.创建初始化对象。即XMLHttpRequest对象  
。2.设置请求的参数。包括：请求的方法，请求的URL。  
3.发送请求  
4.注册事件，onreadystatechange的事件，状态改变时就会调用在数据完整请求回来的时候才调用，需要写一些判断的逻辑  
5.获取返回的数据

# **GET请求** #

var xmlhttp; 
            if（window.XMLHttpRequest）{ 
      //（1）创建初始化对象
         xmlhttp = new XMLHttpRequest（）;     
            } else { 
                xmlhttp = new ActiveXObject（“ Microsoft.XMLHTTP”）; 
            } 
//（2）设置请求的参数。包括：请求的方法，请求的
      URL。xmlhttp.open（“ GET”，'ajax.txt'，true）; 
//（3）发送请求
      xmlhttp.send（）; 
//（4）注册事件
onreadystatechange事件，状态改变时就会调用
        //在数据完整请求回来的时候才调用，写一些判断的逻辑
         / * 
    readyState 
        0：请求未初始化
        1：服务器连接已建立
        2：请求已接收
        3：请求处理中
        4：请求已完成，且响应已立即
    状态
        200 OK
        找不到404 
    * / 
      xmlhttp.onreadystatechange = function（）{ 
        if（xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200）{ 
//（5）在注册的事件中，获取返回的内容，并修改页面的显示
            document.getElementById（“ Div”）。innerHTML = xmlhttp.responseText; 
        } 
      } 
        } 
    &lt;/ script&gt; 
    &lt;body&gt; 
        &lt;div id =“ Div”&gt; &lt;h3&gt;修改文本的内容&lt;/ h3&gt; &lt;/ div&gt; 
      &lt;button type =“ button” onclick =“ load（）”&gt;修改文本&lt;/ button&gt; 
    &lt;/ body&gt; 
&lt;/ html&gt;
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

## **初步是真的还是假的？** ##

AJAX指的是JavaScript和XML（异步JavaScript和XML）  
XMLHttpRequest对象是否要使用AJAX的话，其open（）方法的async参数必须设置为true：  
通过AJAX，JavaScript无需等待服务器的响应，复用：  
1 。在等待服务器响应时执行其他  
脚本2.当响应预先后对响应进行处理

## **PHP与AJAX** ##

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#869194;">1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44
</span></pre> </td> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#4d4d4c;">&lt;！DOCTYPE html&gt; 
&lt;html lang =“ zh-CN”&gt; 
&lt;head&gt; 
    &lt;meta charset =“ UTF-8”&gt; 
    &lt;title&gt;文档&lt;/ title&gt; 
&lt;/ head&gt; 
&lt;style&gt; 
    ul li { 
       list-style：none; 
    } 
&lt;/ style&gt; 
&lt;body&gt; 
&lt;h1&gt;获取json数据&lt;/ h1&gt; 
&lt;input type =“ button” value =“获取json” id ='ajax'&gt; 
&lt;/ body&gt; 
&lt;/ html&gt; 
&lt;script type =“ text / javascript“&gt; 
    //获取的是一个数据
    // document.querySelectorAll（selector）
    //如果要获取多个数据
    document.querySelector（”＃ajax“）。onclick = function（）{ 
        var ajax = new XMLHttpRequest（ ）; 
        ajax.open（'get'，'ajax.php'）; 
        ajax.send（）;
        ajax.onreadystatechange =函数（）{ 
            如果（ajax.readyState == 4 &amp;&amp; ajax.status == 200）{ 
                // JSON字符串是字符串所以我们可以通过responseText的获取
                的console.log（ajax.responseText）; 
                //转换为js对象
                var Obj = JSON.parse（ajax.responseText）; 
                console.log（Obj）; 
                //拼接ul s 
                var str =''; 
                str + ='&lt;ul&gt;'; 
                str + ='&lt;li&gt;'+ Obj.name +'&lt;/ li&gt;'; 
                str + ='&lt;li&gt;'+ Obj.age +'&lt;/ li&gt;'; 
                str + ='&lt;li&gt;'+ Obj.sex +'&lt;/ li&gt;'; 
                str + ='&lt;ul&gt;';

} 
        } 
    } 
&lt;/ script&gt;
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

ajax.php：

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#869194;">1 
2 
3
</span></pre> </td> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#4d4d4c;">&lt;？php 
echo file_get_contents（'package.json'）; 
？&gt;
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

package.json：

## **返回json格式** ##

xhr.onreadystatechange = function（）{ 
        // readyState是请求的状态，为4表示请求结束
        if（xhr.readyState == 4）{ 
          // responseText服务器响应的内容
          //通过eval把传来的json字符串转成对象
          var data = eval（this.responseText）; 
          var str =“”; 
          for（var ix in data）{ 
            str + =“ &lt;选项值='” + data [ix] .id +“'&gt;” + data [ix] .name +“ &lt;/ option&gt;”; 
          } 
          city.innerHTML = str; 
        } 
      }; 
      //打开链接
      xhr.open（“ get”，url，true）; 
      //发送请求
      xhr.send（null）; 
    } 
  &lt;/ script&gt; 
&lt;/ html&gt;
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

ajax.php

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#869194;">1 
2 
3 
4 
5 
6 
7
</span></pre> </td> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#4d4d4c;">&lt;？php 
$ data = array（
  array（'id'=&gt; 1，'name'=&gt;'上海'），
  array（'id'=&gt; 2，'name'=&gt;'北京'），
  array（'id '=&gt; 3，'name'=&gt;'深圳'），
）; 
回声json_encode（$ data）;
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

## **返回xml格式** ##

xhr.onreadystatechange = function（）{ 
        // readyState是请求的状态，为4表示请求结束
        if（xhr.readyState == 4）{ 
          // responseXML服务器响应的内容
          var data = this.responseXML; 
          var str =“”; 
          var title = data.getElementsByTagName（“ title”）; 
          str + =“ &lt;p&gt;” + title [0] .childNodes [0] .nodeValue +“ &lt;/ p&gt;”; 
          str + =“ &lt;p&gt;” + title [1] .childNodes [0] .nodeValue +“ &lt;/ p&gt;”; 
          str + =“ &lt;p&gt;” + title [2] .childNodes [0] .nodeValue +“ &lt;/ p&gt;”; 
          news.innerHTML = str; 
        } 
      }; 
      //打开链接
      xhr.open（“ get”，url，true）; 
      //发送请求
      xhr.send（null）; 
    } 
  &lt;/ script&gt;
&lt;/ html&gt;
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

ajax.php

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#869194;">1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11
</span></pre> </td> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#4d4d4c;">&lt;？php 
标头（'Content-Type：text / xml; charset = utf-8'）; 
$ xml = &lt;&lt;&lt; EOD 
&lt;？xml version =“ 1.0” encoding =“ utf-8”？&gt; 
&lt;news&gt; 
  &lt;title&gt; 111 &lt;/ title&gt; 
  &lt;title&gt; 222 &lt;/ title&gt; 
  &lt;title&gt; 333 &lt;/ title &gt; 
&lt;/ news&gt; 
EOD；
echo $ xml;
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

# **POST请求** #

sub.onclick = function（）{ 
      var name = document.getElementById（“ name”）。value; 
      var pwd = document.getElementById（“ pwd”）。value; 
      //创建XHR对象
      var xhr = new XMLHttpRequest（）; 
      //设置请求URL 
      var url =“ ./ajax.php”; 
      //设置XHR对象readyState变化时响应函数
      xhr.onreadystatechange = function（）{ 
        // readyState是请求的状态，为4表示请求结束
        if（xhr.readyState == 4）{ 
          // responseText服务器响应的内容
          警报（ “服务器响应数据：” + this.responseText）; 
        } 
      }; 
      //打开链接
      xhr.open（“ post”，url，true）; 
      //设置请求头部
      xhr.setRequestHeader（“ Content-Type”，“ application / x-www-form-urlencoded”）; 
      //发送请求
      xhr.send（“ name =” + name +“＆pwd =” + pwd）; 
    }

&lt;/ script&gt; 
&lt;/ html&gt;
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

ajax.php

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#869194;">1 
2 
3 
4
</span></pre> </td> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#4d4d4c;">&lt;？php 
$ name =！empty（$ _ POST ['name']）吗？trim（$ _ POST ['name']）：'没有数据'; 
$ pwd =！empty（$ _ POST ['pwd']）吗？trim（$ _ POST ['pwd']）：'没有数据'; 
echo'用户名：'，$ name，'密码：'，$ pwd;
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

# **封装原生Ajax请求** #

## **封装get请求** ##

xhr.onreadystatechange = function（）{ 
    if（xhr.readyState == 4 &amp;&amp; xhr.status == 200）{ 
      callback（xhr.responseText）; 
    } 
  } 
}

// //调用
ajaxPost（'/ api / user'，'id = 9＆com = aicoder'，function（data）{ 
  //后台返回的数据就是字符串类型。要转成json，必须自己手动转换
  var user = JSON。 parse（data）; 
  console.log（user.id）; 
  console.log（user.com）; 
}）; 
@return undefined 
* / 
函数ajaxGet（URL，callback）{ 
  var xhr = new XMLHttpRequest（）; 
  xhr.open（'GET'，url，true）; 
  xhr.send（）;

xhr.onreadystatechange = function（）{ 
    if（xhr.readyState == 4 &amp;&amp; xhr.status == 200）{ 
      callback（xhr.responseText）; 
    } 
  } 
}

//调用
ajaxGet（'/ user.json'，函数（数据）{ 
  console.log（data）; 
}）;
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

## **封装post请求** ##

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#869194;">1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20
</span></pre> </td> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#4d4d4c;">函数ajaxPost（URL，data，callback）{ 
  var xhr = new XMLHttpRequest（）; 
  xhr.open（'POST'，url，true）; 
  xhr.setRequestHeader（'Content-type'，'application / x-www-form-urlencoded'）; 
  xhr.send（data）;

xhr.onreadystatechange = function（）{ 
    if（xhr.readyState == 4 &amp;&amp; xhr.status == 200）{ 
      callback（xhr.responseText）; 
    } 
  } 
}

# **同源策略** #

所谓的同源，指的是协议，域名，端口相同。浏览器位于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能解读对方的资源，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#869194;">1 
2 
3 
4 
5
</span></pre> </td> 
   <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#4d4d4c;">http://example.com和https://example.com不同，因为协议不同

http：// localhost：8080和http：// localhost：1000不同，因为端口不同

http：// localhost：8080和https://example.com不同，协议，域名，端口号都不同
</span></pre> </td> 
  </tr> 
 </tbody> 
</table>

# **跨域HTTP请求** #

## **什么是跨域？** ##

当请求的资源的URL与当前页面的URL中的方案，主机名，端口有一个不同的时候就算是跨域操作。参见请上面的同源  
因为有同源策略的限制，XMLHttpRequest的仅可以发起操作同域（同类）下的请求。虽然这个限制关闭了安全中断但是也阻止了纠正合法的适合使用的跨域请求。不过这种情况下也可以在页面中使用img，form，iframe等元素中使用跨域URL，最中在浏览器中显示这些数据。但是因为相互策略，浏览器可以操作或者不能很好的显示跨域文档内容  
如果使用XMLHttpRequest来操作跨域请求，那么所有的文档内容都将在responseText的属性中暴露，所以同源策略不允许的XMLHttpRequest进行跨域请求。  
注意：IMG元素会把返回的内容强制转换为图片.iframe不允许元素跨域操作数据  
但是需要强调地点的剧本的英文元素并未真正受到保守策略的限制，因为脚本有可能需要加载不同域的javascript 资源。需要加载并执行任何源的脚本。正因为如此，脚本的重定向变为在跨域操作中代替XMLHttpRequest的主流Ajax传输协议：JSONP

# **JSONP** #

script元素可以作为一种Ajax传输协议，只需设置脚本元素的src属性并插入到DOM中，浏览器就会发出一个HTTP请求到src属性所指向的URL。就是因为它不受惯性策略的影响。因此可以发送一个不同源的请求。而另外一个原因就是用script元素会自动解码并执行（浏览器会当做javascript来处理）下载的数据

> JSONP带来的安全性考虑：  
> 为了使用脚本元素来进行Ajax传输，您必须提供Web页面信任并执行目标服务器返回过来的任何数据。这意味这对于不信任的服务器，不应该采用该技术。在与因此作为Ajax数据传输的脚本与可信的服务器交互，是相当危险的事情

JSONP（带填充的JSON）是一种跨域请求方式。主要原理是利用了脚本标签可以跨域请求的特性，由其src属性发送请求到服务器，服务器返回JavaScript代码，浏览器接受响应，然后就直接执行了，这和通过script标签引用外部文件的原理是一样的  
JSONP由两部分组成：并存的变量，通常是在浏览器控制中，作为参数发往服务器端（当然，你也可以固定替换  
JSONP的请求过程：当服务器响应时，服务器端就会把该函数和数据拼成字符串返回。

*  请求阶段：浏览器创建一个脚本标签，并给其src赋值（类似[http://example.com/api/?callback=jsonpCallback）][http_example.com_api_callback_jsonpCallback]
 *  发送请求：当给script的src赋值时，浏览器就会发起一个请求。
 *  数据响应：服务端将要返回的数据作为参数和函数名称拆分在一起（格式类似的“ jsonpCallback（\{name：'abc'\}））”）返回。当浏览器接收到了响应数据，由于发起请求的是脚本，所以相当于直接调用jsonpCallback方法，并且纳入了一个参数
    
    <table> 
     <tbody> 
      <tr> 
       <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#869194;">1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    31 
    32 
    33 
    34 
    35 
    36
    </span></pre> </td> 
       <td style="text-align:left;vertical-align:middle;"> <pre style="margin-left:0px;"><span style="color:#4d4d4c;">//实现一个简单的JSONP请求
    //请求的url，包装方法名称，可选函数
    功能JSONP（url，callbackName，callback）{ 
        //为本次请求创建一个
        唯一的callback名称var cbnum =“ cb” + JSONP .count ++; //计数器生成一个    唯一的名称
    var cbname =“ JSONP。” + cbnum; //作为JSONP方法的一个静态属性
    
        if（url.indexOf（“？”）==-1）{ 
            url + =“？” + callbackName +“ =” + cbname; 
        }其他{ 
            url + =“＆” + callbackName +“ =” + cbname; 
        }
    
        JSONP [cbnum] = function（response）{ 
            try { 
                callback（response）; 
            }抓住（例如）{
    
            } finally { 
                //执行完毕之后就
                删除掉，因为没什么用了删除JSONP [cbnum]; 
                script.parentNode.removeChild（script）; 
            } 
        } 
        var script = document.createElement（“ script”）; 
        script.src = url; 
        document.body.appendChild（script）; 
    } 
    // 初始化为唯一名称的计数器
    JSONP.count = 0;
    
    //发起JSONP请求。JSONP 
    （“ http://suggestion.baidu.com/su?wd=xxx”，“ cb”，function（data）{ 
        //将百度返回的数据输出到控制台中
        console.log（数据）
    }）;
    </span></pre> </td> 
      </tr> 
     </tbody> 
    </table>

注意：当多次执行同一个网址的JSONP操作时需要注意缓存问题

[20200401173613148.gif]: /images/20230528/0bb44f0d681640439bceb5c6caaf9699.png
[http_example.com_api_callback_jsonpCallback]: http://example.com/api/?callback=jsonpCallback%EF%BC%89