web前端javaScript 之 【Ajax】

简介: ajax基础,看完会有收获,喜欢请点赞。

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

v-chat:villinWechat

目录
相关文章
|
14天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
15天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
16天前
|
编解码 前端开发 JavaScript
Web 前端开发中的最佳实践
本文将介绍 Web 前端开发中的最佳实践,包括代码组织、性能优化、响应式设计和用户体验等方面。通过遵循这些实践,开发人员可以提高开发效率,优化用户体验,并减少潜在的问题和错误。
|
18天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
40 5
|
8天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
9天前
|
前端开发 JavaScript vr&ar
前端新技术探索:WebAssembly、Web Components与WebVR/AR
【4月更文挑战第12天】WebAssembly、Web Components和WebVR/AR正重塑Web应用的未来。WebAssembly允许C/C++等语言在Web上高效运行,提供接近原生的性能,如游戏引擎。Web Components通过Custom Elements和Shadow DOM实现可复用的自定义UI组件,提升模块化开发。WebVR/AR(现WebXR)则让VR/AR体验无需额外应用,直接在浏览器中实现。掌握这些技术对前端开发者至关重要。
15 3
|
21天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
30天前
|
机器学习/深度学习 前端开发 算法
利用机器学习优化Web前端性能的探索与实践
本文将介绍如何利用机器学习技术来优化Web前端性能,探讨机器学习在前端开发中的应用,以及通过实际案例展示机器学习算法对前端性能优化的效果。通过结合前端技术和机器学习,提升Web应用的用户体验和性能表现。
|
1月前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
42 3
Web前端全栈HTML5通向大神之路
|
8月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
95 0