Web前端-Ajax基础技术(下)

小咪咪 2021-09-18 12:44 299阅读 0赞

![Web前端-Ajax基础技术(下)][Web_-Ajax]

> Web前端-Ajax基础技术(下)

你要明白`ajax`是什么，怎么使用？

`ajax`，`web`程序是将信息放入公共的服务器，让所有网络用户可以通过浏览器进行访问。

浏览器发送请求，获取服务器的数据：

地址栏输入地址，表单提交，特定的`href`或`src`属性。

`ajax`上手：

// 创建一个XMLHttpRequest类型的对象
    var xhr = new XMLHttpRequest();
    // 打开一个网址的连接
    xhr.open('GET', './time.php');
    // 发送一次请求
    xhr.send(null);
    // 处理网页呈现后的操作
    xhr.onreadystatechange = function() {
     if(this.readyState === 4) {
      console.log(this);
     }
    }

![效果][1240]

`readyState`

0 xhr被创建，未调用open()方法
    1 open()方法被调用，建立了连接
    2 send()方法被调用，可以获取状态行和响应头
    3 响应体下载中，responseTest属性可能已经包含部分数据
    4 响应体下载完成，直接使用responseText

`http`请求：

// 设置请求报文的请求行
    xhr.open('GET', './time.php');
    // 设置请求头
    xhr.setRequestHeader('Accept', 'text/plain');
    // 设置请求体
    xhr.send(null);
    xhr.onreadystatechange = function() {
     if(this.readyState === 4) {
      // 获取响应状态码
      console.log(this.status);
     // 获取响应状态描述
      console.log(this.statusText);
     // 获取响应头信息
      console.log(this.getResponseHeader('Content-Type')); // 指定响应头
      console.log(this.getAllResponeseHeaders()); // 全部响应头
      // 获取响应体
      console.log(this.responseText) // 文本形式
      console.log(this.responseXML) // xml
     }
    }

`post`请求：

var xhr = new XMLHttpRequest();
    // open方法的第一个参数作用, 设置请求的method
    xhr.open('POST', './add.php');
    // 设置请求体格式
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('key=value');
    xhr.onreadystatechange = function() {
     if(this.readyState === 4) {
      console.log(this.responseText);
     }
    }

异步同步：

// 异步
    console.log('before ajax');
    var xhr = new XMLHttpRequest();
    xhr.open('GET', './time.php', true);
    xhr.send(null);
    xhr.onreadystatechange = function() {
     if(this.readyState === 4){
      console.log('request done');
     }
    }
    console.log('after ajax');
    
    // 同步
    console.log('before ajax');
    var xhr = new XMLHttpRequest();
    xhr.open('GET', './time.php', false);
    xhr.send(null);
    xhr.onreadystatechange = function() {
     if(this.readyState === 4){
      console.log('request done');
     }
    }
    xhr.send(null);
    console.log('after ajax');

响应类型：

var xhr = new XMLHttpRequest();
    xhr.open('GET', 'test.php');
    xhr.send();
    // 请求代理对象，响应类型
    xhr.responseType = 'json';
    xhr.onreadystatechange = function() {
     if(this.readyState != 4) return;
     console.log(this);
    }

服务器响应，使用 `XMLHttpRequest` 对象的`responseText`或`responseXML`属性。

`responseText`获取字符串形式的响应数据，`responseXML`获取`xml`形式的响应数据。

`responseText`

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

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

模板引擎：

artTemplate: https://aui.github.io/art-template/

`art-template`是一个简约，超快的模板引擎，采用作用域声明的技术来优化模板渲染速度。

安装：

npm install art-template --save

下载：

lib/template-web.js

// 封装
    function ajax(method, url, params) {
    
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
     
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    params = params || null;
    xhr.send(params);
    xhr.onreadystatechange=function(){
     if(this.readyState != 4) return
     console.log(this.responseText);
    } 
    
    }
    
    ajax('GET', 'time.php', 'key=value');
    
    function ajax(method, url, params) {
    
    var xhr = new XMLHttpRequest();
    if(method === 'GET'){
     url += "?" + params;
    }
    xhr.open(method, url);
    
    var data = null;
    if(method === 'POST') {
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    data = params
    }
    
    xhr.send(data);
    xhr.onreadystatechange=function(){
     if(this.readyState != 4) return
     console.log(this.responseText);
    } 
    
    }

// 传对象
    function ajax(method, url, params) {
    
    var xhr = new XMLHttpRequest();
    if(typeof params === 'object'){
     var tempArr = [];
     for(var key in params){
      var value = params[key];
      tempArr.push(key + "=" + value);
     } 
     params = tempArr.join('&');
    }
    
    if(method === 'GET'){
     url += "?" + params;
    }
    xhr.open(method, url);
    
    var data = null;
    if(method === 'POST') {
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    data = params
    }
    
    xhr.send(data);
    xhr.onreadystatechange=function(){
     if(this.readyState != 4) return
     console.log(this.responseText);
    } 
    
    }

回调：  
![效果][1240 1]

`jquery`中的`ajax`。

https://www.jquery123.com/category/ajax/

$.ajax({
     url: 'json.php',
     type: 'get',
     dataType: 'json',
     success: function(res) {
      console.log(res)
     }
    })

`ajax`回调事件：

<!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title></title>
    </head>
    <body>
     <script src="jquery.js"></script>
     <script>
      $.ajax({
       url: 'time.php',
       type: 'get',
       beforeSend: function(xhr) {
        console.log('beforeSend', xhr);
       },
       success: function(res) {
        console.log(res);
       },
       error: function(xhr) {
        console.log(xhr);
       },
       complete: function(xhr) {
        console.log(xhr);
       }
      })
     </script>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title></title>
    </head>
    <body>
     <script src="jquery.js"></script>
     <script>
      var xhr = new XMLHttpRequest();
      xhr.open('get','time.php');
      xhr.send()
      xhr.onreadystatechange = function() {
       if(this.readyState != 4) return
       console.log(this.responseText);
      }
     </script>
    </body>
    </html>

.ajaxComplete()
    当ajax请求完成后注册一个回调函数
    .ajaxError()
    ajax请求出错
    .ajaxSend()
    ajax请求发送之前绑定一个要执行的函数
    .ajaxStart()
    在ajax请求刚开始时执行一个处理函数
    .ajaxStop()
    在ajax请求完成时执行一个处理函数
    .ajaxSuccess()
    绑定一个函数当ajax请求成功完成时执行
    jQuery.ajax()
    执行一个异步的http(ajax)请求
    jQuery.ajaxPerfilter()
    在每个请求之前被发送和$.ajax()处理它们前处理
    jQuery.ajaxSetup()
    为以后要用到的ajax请求设置默认的值
    jQuery.ajaxTransport()
    创建一个对象
    jQuery.get()
    使用一个http get请求从服务器加载数据
    jQuery.getJSON（）
    jQuery.getScript()
    GET请求从服务器加载并执行一个 JavaScript 文件
    jQuery.post() 请求从服务器加载数据

跨域：  
同源，域名，协议，端口，完全相同，同源的相互通过`ajax`的方式进行请求。  
不同源地址之间，不能相互发送`ajax`请求。

$.get('http://', function(res) {
     console.log(res);
    })

<!DOCTYPE html>
    <head>
     <meta charset = "UTF-8">
     <title>AJAX基础回顾</title>
    </head>
    <body>
     <script>
     var xhr = new XMLHttpRequest();
     xhr.open('GET', 'test.php');
     xhr.responseType='json';
     xhr.onreadystatechange = function() {
      if(this.readyState !== 4) return
      console.log(this.response);
     }
     </script>
    </body>
    </html>

$.get('http://...', function(res){
     console.log(res);
    })

var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'http//...';
    document.body.appendChild(link);
    
    var script = document.createElement('script');
    script.src = 'http://...';
    document.body.appendChild(script);

`jsonp`原理：  
`json`是借助`script`标签发送跨域请求的技巧。  
原理是在客户端借助`script`标签请求服务端的一个动态网页，服务端的这个动态网页返回一段带有函数调用的`javascript`全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。

$.ajax({
     url: 'http://...',
     dataType: 'json',
     success: function(res) {
      console.log(res);
     }
    })

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

**作者简介**

**达叔**，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

![努力努力再努力Jeskson][Jeskson]

[Web_-Ajax]: /images/20210724/7243a1f498444e19bd48b0a7184073f7.png
[1240]: /images/20210724/fb35db747167454ea6ee3a59ea095826.png
[1240 1]: /images/20210724/538dfa84f19b41e0a2b743e31e5bec6e.png
[Jeskson]: /images/20210724/511b0f930dac4ca79aaf2341889c9632.png