ajax学习笔记
in 默认分类 with 0 comment

ajax学习笔记

in 默认分类 with 0 comment

ajax

概念:他是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站的体验(简单说:就是可以像后端请求数据,返回给前端使用)

应用场景:

  1. 页面上拉加载更多数据
  2. 列表数据无刷新分页
  3. 表单项离开焦点数据验证
  4. 搜索框提示文字下拉列表
  5. 前后端分离

注意:

虽然Ajax是在JavaScript中但是不能直接在网页中生效,需要和服务端进行交互才有效

运行原理

实现步骤:

  1. 创建Ajax对象

    var xhr = new XMLHttpRequest();
  1. 告诉Ajax请求地址以及请求方式

    xhr.open('请求方法','url');
  1. 发送请求

    xhr.send();
  1. 获取服务端与客户端的响应数据

    /* 因为需要考虑网络的原因,即不知道什么时候请求完成,所以    必须放在onload中才能正确的拿到数据onload 在请求完成后    会自动的调用
    */
    xhr.onload = function(){
        console.log(xhr.responseText);
    }

手写ajax

    // 第一步:
    var xhr = new XMLHttpRequest(); // 创建ajax对象
    
    // 第二步:告诉ajax对象要向哪里发送请求,以什么方式发送请求
    xhr.open('get','http://127.0.0.1:3000/first');
    
    // 第三步:发送请求
    xhr.send();
    
    // 第四步:获取服务端响应到客户端的数据
    
    xhr.onload = function(){
        console.log(xhr.responseText)
    }
    // 数据格式
    
    /**
     * 目前的情况json成为了主流的数据交互格式
     * 但根据规定请求和响应的json数据都会被转为字符串的形式传送,所以前端界面使用时还需要转化一下
     *   -- JSON.parse()
     * */
    xhr.onload = function(){
        // 获取打印返回的数据
        console.log(JSON.parse(xhr.responseText))
    }

获取服务端数据

onload方法

因为我们不知道请求到底什么时候完成,也就是说我们不知道什么时候才可以准确的拿到响应的数据使用,所以我们需要在请求完成的时候才能获取数据使用

onload 属性会在请求完成的时候自动的触发,所以我们可以在onload 中获取我们的响应数据

xhr.onload = function(){
    // 获取打印返回的数据
    console.log(JSON.parse(xhr.responseText))
}

ajax的状态码

状态码的获取

可以通过Ajax对象的readyState属性来实现

console.log(xhr.readyState)

第二种获取响应数据的方式

当Ajax的状态码变为4的时候就说明我们可以使用服务端响应的数据了,加上onreadystatechange() 事件就可以实现对数据的获取

这个事件会在状态码变化的时候自动的触发

xhr.onreadystatechange = function(){
    // 响应完成
    if (xhr.readyState == 4){
        // 完成数据的获取并打印
        console.log(xhr.responseText)
    }
}

对比onload

上面那种方式获取响应数据与onload 对比更加推荐使用onload 来完成数据的获取,因为onload 只会调用一次,而上面那种方式会多次调用影响性能。

响应错误处理

可以通过status 属性来获得 http 的状态码,然后分别处理

常见的错误

Ajax同步异步问题

一些基础概念

  1. 同步:只有一件事情做完之后,才能做另一件事(代码逐行执行)
  2. 异步:一个人事情没有做完,转而去做其他的事情,当其他的事情做完之后再回来继续做之前的未完成的事情

落实到代码上:就是异步代码虽然需要花费时间去执行,但是程序不会等待异步代码执行完成后再继续执行后续代码,二是直接执行后续代码,当后续代码执行完成后再回头看异步代码是否返回结果,如果已有返回结果,再调用事先准备好的回调函数处理异步代码执行的结果

Ajax请求限制

Ajax只能向自己的服务器发送请求,这是因为同源造成的,什么是同源呢?

这就是所谓的解决前端跨域问题

同源:

指两个页面拥有相同的协议,域名和端口,那么这两个页面就属于同一个源,其中只要有一个不相同,就是不同源

同源政策的目的

为了保护用户的信息安全,防止恶意的网站窃取数据,最初的

解决方案

第一步:

将不同源的服务器端请求地址写在script 标签的src 属性中

<script src="www.example.com"></script>

第二步:

服务端响应数据必须是一个函数的调用,真正要发送给客户端的数据需要作为函数调用的参数

const data = 'fn({name:"张三",age:"20"})';
res.send(data);

第三步:

在客户端的全局作用域下定义函数fn ,并且需要定义在script 标签的前面

function fn(data){
    // doing
    // 完成数据的处理
}

顾名思义就是将跨域的url 发送给后端,通过后端去请求这个域名,然后再将结果返回给前端使用。(因为后端程序是不收跨域限制的)

Responses