web前端javaScript 之 【Ajax】

avillin 2019-07-22

php 前端与交互设计 javascript html5 服务器 LOG web js 浏览器 ajax 跨域 xhr 数据请求 请求数据

Ajax是干什么的,为什么要学这个技术:

我们在上网浏览网站的时候,经常会看到下拉加载的的功能。例如百度图片、淘宝列表等等……,这种我们每次下滑,就自动加载更多的信息。这种信息不用每次刷新页面,而就会自动加载出来;那么我们前端,像这种不必刷新页面也能获取新的数据的技术,我们就需要使用ajax来实现。而ajax也是目前Web开发人员必须要掌握一种技术。简单来讲,ajax就是提交并且接收了服务器的数据,从而可以获取新的数据,来渲染页面的更新

Ajax技术核心是XMLHttpRequest对象(简称XHR),帮助记忆,可以想象是“小黄人”的拼音简称。这是由微软首先引入的一个特性,其他浏览器提供商也都是后来慢慢相同的实现这个技术。也是在2005年低,2006年初,Ajax技术才慢慢的红遍了技术圈。IE5是第一款引入的XHR对象的浏览器,目前我们只讲解适合于IE7之后的版本,之前的不做讲解。

---用法:---

一、创建一个ajax对象

首先我们需要构造出一个新的XMLHttpRequest

var xhr = new XMLHttpRequest()

二、配置这个对象open(发送方式, 地址, 是否异步);

构造完之后,我们需要创建一个请求发送我们的数据,因为向服务器发送了请求,我们才能得到想要的数据。创建我们需要一个固定的方法open()

open()它有三个参数,第一个是请求的方式五种方式 :get/post/put/delete/head),第二个是请求的地址URL,第三个是个布尔值true/false代表是否异步

比如我们向一个后端接口/villin.php发一个get请求,大部分的请求都是异步加载,我们我们就可以这样写。

var xhr = new XMLHttpRequest();
xhr.open('get', './villin.php', true);

三、发送请求

这就创造出了一个简单的请求数据,那么接下来我们要把这个数据发送给数据库,方法send(null)

var xhr = new XMLHttpRequest();
xhr.open('get', './villin.php', true);
xhr.send(null)

send()方法按照中文意思理解,就是发送,它接收一个参数,作为请求主体发送的数据。如果不需要通过请求主体发送数据,就传入一个null,也可以不传,但是对于某些浏览器来说,是必须要传的,所以我们规范一点,写上null。

四、监听响应

这时,后端服务器接收到了我们发送的数据,就会返回我们想要的数据。

XHR的技术价值就是可以实时监听数据的变化,实时返回新的数据,那么怎么监听?他自身携带了一个属性,叫onreadystatechange,从字面意思理解,就是实时监听改变。所以我们监听之后要做的事件,都需要写在onreadystatechange函数当中。

onreadystatechange会监听一个叫readyState的值,这个值很重要,它会反映出当前响应过程的活动阶段,用0~4来表示:

0表示XHR刚创建出来,还没有初始化,没调用open()
1表示已经调用open()方法,但还没有调用send()
2表示已经调用send()方法,但还没有接收到数据。
3表示服务器已经接收到了部分响应数据。
4表示服务器已经接收到了全部响应数据,可以在客户端使用了。

所以当readyState返回4的时候,说明数据返回成功,我们就可以拿到相应的数据了。

    var xhr = new XMLHttpRequest();
    xhr.open('get', './villin.php', true);
    xhr.onreadystatechange = function () {

        if (this.readyState !== 4) {
            return;
        }else{   
            //成功返回数据,在这里获取数据
        }
    }
    xhr.send(null) // 要成功发送请求头信息,onreadystatechange一定要在open()之后,send()之前监听。

此时说明服务器已经接收到了全部响应(但响应未必是返回成功的数据)。那么服务器会把响应数据返回给浏览器,浏览器也就返回相应的状态码status,表示数据异常或成功。常见的状态码如下:

2开头,代表响应成功,如200
3开头,代表重定向,如302页面暂时重定向,304表示请求的资源并没有被修改,可以使用浏览器中缓存的版本。
4开头,请求有错误,如400
5开头,服务器报错,如500

所以我们要使用返回来的数据,先判断是否返回正常,一般是>=200并且<300。返回成功后,数据会被放置在一个叫responseText当中,我们直接打印出responseText就可以提取出内部的文本。

    var xhr = new XMLHttpRequest();
    xhr.open('get', './villin.php', true);
    xhr.onreadystatechange = function () {

        if (this.readyState !== 4) {
            return;
        }else{   
            //成功返回数据,在这里获取数据
            if(this.status >= 200 && this.status < 300) {
              console.log('请求成功')
              console.log(this.responseText)  // 此刻拿到后端的数据,打印出responseText
            }else{
              console.log('请求出错')
            }
        }
    }
    xhr.send(null) // 要成功发送请求头信息,onreadystatechange一定要在open()之后,send()之前监听。

---超时设定:timeout---

最初,IE8为XHR提供了超时属性timeout,表示请求在等待多少毫秒之后就终止。再给timeout设置超时设定后,在规定时间没有接收到请求,那么就会触发timeout,进而调用ontimeout程序,如下:

    var xhr = new XMLHttpRequest();
    xhr.open('get', './villin.php', true);
    xhr.onreadystatechange = function () {

        if (this.readyState !== 4) {
            return;
        }else{
          try{
              //成功返回数据,在这里获取数据
              if(this.status >= 200 && this.status < 300) {
                  console.log('请求成功')
                  console.log(this.responseText)  // 此刻拿到后端的数据,打印出responseText
                }else{
                  console.log('请求出错')
              }
          }catch(val){
              // 可以写timeout处理程序
          }   
        }
    }
    xhr.timeout = 2000; // 设置超时时间为2000mm,超出会调用ontimeout事件
    xhr.ontimeout = function(){
      alert('请求超时2000mm')
    }
    xhr.send(null) // 要成功发送请求头信息,onreadystatechange一定要在open()之后,send()之前监听。

注意:如果在超时之后再访问status就会出现错误,所以我们可以将判断封装到try...catch语句,这样就可以完美的解决超时问题
虽然timeout是由IE提供的,不过目前其他浏览器的兼容性,还需要大家去尝试。

---load事件---

Firefox在实现Ajax的简化模型时,引入了load事件。它可以代替onreadystatechange事件,响应完毕后将触发onload事件,所以我们就可以省去了检查readyState属性了,不比判断readyState是否等于4的问题了。

    var xhr = new XMLHttpRequest();
    xhr.open('get', './villin.php', true);
    xhr.onload = function () {
      if(this.status >= 200 && this.status < 300) {
          console.log('请求成功')
          console.log(this.responseText)  // 此刻拿到后端的数据,打印出responseText
        }else{
          console.log('请求出错')
      }
    }
    xhr.send(null)

目前Firefox、Oprea、Chrome、Safari都支持load事件。

---浏览器跨域---

通过XHR实现ajax通信的主要一个主要限制,就是来自跨域的安全策略(同源策略)。默认情况下,XHR对象只能访问与包含它的页面位于同一个域中的资源,这种安全策略是为了预防某些恶意行为。

怎么解决跨域问题,其实IE与其他浏览器还各有千秋,比如IE与其他浏览器的CORS的实现,在open()方法中传入对决URL地址,如www开头的地址,我们就可以拿到绝对地址上的信息。还有一起其他跨域技术:

JSONP

Jsonp虽然和json长得很像,不过这两个还是没什么关系的,json是以键和值的方式存在的一种格式,Jsonp是由回调函数和数据组成的一种技术。

Jsonp是通过动态<script>元素来使用的,使用的时候可以为src指定一个跨域的URL。<script>元素有能力不受限制的从其他域中加载资源,所以可以实现跨域请求。

<script src='www.avillin.com/?callback=handleaaa'></script> // URL就是此地址,后边callback返回的就是函数,名称为handleaaa
<script>
function handleaaa(response){
  console.log(response)
}
</script>

扩展:目前前端使用的vue框架中,也有自己的跨域方式,可以通过proxy来实现跨域。

更多关于ajax的知识,也欢迎一起探讨。

本文作者:avillin

邮箱:avillin@163.com
v-chat:villinWechat

登录 后评论
下一篇
corcosa
13784人浏览
2019-10-08
相关推荐
Web 研发模式演变
557人浏览
2017-11-14 22:38:00
Web 研发模式演变
1200人浏览
2014-06-17 10:00:00
Web开发系列 - ExtJS
742人浏览
2017-08-08 18:25:00
前端框架你究竟选什么
410人浏览
2012-07-26 20:46:00
前端框架你究竟选什么
3783人浏览
2016-05-03 15:57:50
程序员Web面试之jQuery
408人浏览
2014-06-19 13:50:00
JavaScript之web通信
609人浏览
2017-11-15 14:54:00
高性能建站之前端优化篇
597人浏览
2011-10-25 22:16:00
[转载]Web 研发模式演变
405人浏览
2016-06-23 09:09:00
1
1
0
497