AJAX学习笔记

面向ai编程的前端菜狗
204 阅读3分钟

  1. ajax全称为asynchronous JavaScript and xml，就是异步的js和xml

    通过ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。

    ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

  2. XML可扩展标记语言

XML被设计用来传输和存储数据

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全部都是自定义标签，用来表示一些数据。

  1. AJAX的优缺点

    优点:

    • 可以无需刷新页面与服务器端进行通信

    • 允许根据用户事件来更新部分页面内容

    缺点：

    • 没有浏览历史，不能回退

    • 存在跨域问题（同源）

    • SEO不友好

  2. http协议：超文本传输协议，协议详细规定了浏览器和万维网服务器之间相互通信的规则。

  • 请求报文

    • 格式与参数

    • 请求行 GET / URL HTTP版本

      • 请求头

        • Host

        • Cookie

        • Content-type

        • User-Agent

    • 空行

    • 体 如果是get请求，请求体是空的，如果是post请求，请求体可以不为空

  • 响应报文

    • 响应行 HTTP版本 响应状态码 状态字符串

    • 响应头

      • Content-Type

      • Content-length

      • Content-encoding

    • 空行

    • 响应体 html内容

  1. 使用express框架

    1. 引入express

    const express = require('express');

    1. 创建应用对象

    const app = express（）；

    1. 创建路由规则

    • request 是对请求报文的封装

    • response是对响应报文的封装

    • app.get('/',(request,response)=>{ });

    • get是get请求

    • 还可以写app.post(post请求)

    • app.all(任意类型的请求)

    1. 监听端口启动服务

    app.listen(8000,()=>{ })

  2. AJAX请求的基本操作

    1. 创建对象

    const xhr = new XMLHttpRequest();

    1. 初始化 设置请求方法和url

    xhr.open('GET','url');

    1. 发送

    xhr.send();

    1. 事件绑定 处理服务端返回的结果

    readystate是xhr对象中的属性，表示状态 0 1 2 3 4

xhr.onreadystatechange = function(){

    判断（服务端返回了所有的结果）

    if(xhr.readyState ===4){

            判断响应状态码 200 404 403 401 500

            2xx表示成功

        if(xhr.status>=200 && xhr.status <300){

            处理结果 行 头 空行 体

            1.响应行

            xhr.status 状态码

            xhr.statusText 状态字符串

            xhr.getAllResponseHeaders()所有响应头

            xhr.response 响应体

        }

    }

}

  • ajax在传参数时可以在url后面加上？+参数名=参数值&参数名=参数值

  • AJAX发送POST请求(服务端得是app.post)

    1. 创建对象

    const xhr = new XMLHttpRequest();

    1. 初始化 设置请求方法和url

    xhr.open('POST','url');

    1. 发送

    xhr.send();

    1. 事件绑定 处理服务端返回的结果

    readystate是xhr对象中的属性，表示状态 0 1 2 3 4

xhr.onreadystatechange = function(){

    判断（服务端返回了所有的结果）

    if(xhr.readyState ===4){

        判断响应状态码 200 404 403 401 500

        2xx表示成功

        if(xhr.status>=200 && xhr.status <300){

            处理结果 行 头 空行 体

            1.响应行

            xhr.status 状态码

            xhr.statusText 状态字符串

            xhr.getAllResponseHeaders()所有响应头

            xhr.response 响应体

        }

    }

}

  • POST设置请求体

  • 可以在xhr.send()中设置

  • AJAX设置请求头信息（一般用于身份校验）

在初始化xhr.open后面设置

  • xhr.setRequestHeader('预定义请求头名','请求头值');

  • 如果想写自定义请求头，必须在服务端有对应的响应头

  1. ajax服务端响应json数据

    在服务端响应一个数据

    const data = {

        name：''

    }
  1. 对对象进行字符串转换

let str = JSON.stringify（data）；

在前端

  1. 手动对数据转化

let data = JSON.parse（xhr.response）;

result.innerHTML = data.name;

  1. 自动转换

    在发送请求后面

    xhr.responseType = 'json';

    这样结果自动转成一个对象，我们直接用结果就可以了

    result.innerHTML = xhr.response.name

    nodemon自动重启工具，当修改服务端代码时不用手动重启端口

    AJAX的IE缓存问题解决

    在URL中，‘url？t=’+Date.now()

  2. AJAX请求超时与网络异常处理

    在发送请求后面可以超时设置

    xhr.timeout = 时间；

    超时回调

    xhr.ontimeout = function( ){}

    网络异常回调

    xhr.onerror = function(){} ajax取消请求

    xhr.abort();

    因为这个xhr不是全局变量，需要在全局设一个变量

    let xhr = null；

  3. ajax重复请求问题

    首先在全局定义一个标识变量

    let isSending = false；判断是否正在发送ajax请求

    在创建对象后修改标识变量的值

    isSending = true;

    然后判断标识变量

    if（isSending）xhr.abort();如果正在发送，则取消该请求，创建一个新的请求

    在请求完成后修改标识变量

xhr.onreadystatechange = function(){

    if(x.readyState === 4){

        isSending = false;

    }

}
  1. jQuery发送ajax请求

  • get请求

    • $get(url,[data],[callbackj],[type])

    • url:请求的URL地址

    • data：请求携带的参数

    • callback：载入成功时回调函数

    • type：设置返回内容格式，xml，html,script,json,text,

  • post请求

    • $post(url,[data],[callbackj],[type])

    • url:请求的URL地址

    • data：请求携带的参数

    • callback：载入成功时回调函数

    • type：设置返回内容格式，xml，html,script,json,text,

  1. jQuery通用方法发送ajax请求
$ajax({

    url:请求的URL地址

    data:请求携带的参数

    type：请求类型，

    success：function（data）{

    }成功的回调

    timeout:超时时间

    error：function(){

    }失败的回调

    headers：{

    }设置头信息

})

\

  1. Axios发送AJAX请求

  • 配置 baseURL

    axios.defaults.baseURL = 'URL'

  • get请求

axios.get('路径'，{

    url参数

    params：{

  
    }

    请求头信息

    headers：{

    }

})；
  • post请求
axios.post('路径'，{

    请求体

    }，{

    url参数

    params：{


    }

    请求头信息

    headers：{

    }

})；
  1. Axios函数发送AJAX请求
axios({

    请求方法

    method：

    请求地址

    url：

    url参数

    params：{

 
    }，

    头信息

    headers：{

 
    }，

    请求体参数

    data：{

    }

    }).then(response=>{

        响应状态码

        response.status

        响应状态字符串

        response.statusText

        响应头信息

        response.headers

        响应体

        response.data
        }

})
  1. 使用fetch函数发送AJAX请求
fetch('url',{

    请求方法

    method：

    请求头

    headers：{

    }，

    请求体

    body：

 

    }).then(response =>{

    return response.json();

    }).then(response=>{


});
  1. 同源策略

  • 同源策略是浏览器的一种安全策略，同源：协议，域名，端口号必须完全相同。

  • 违背同源策略就是跨域。

  • 如果满足同源的话，在写ajax请求时url可以简写，浏览器会补全

  1. 如何解决跨域？

    1. JSONP，是一个非官方的跨域解决方案，只支持get请求。

      在网页中有一些标签天生具有跨域能力，比如：img，link，iframe，script

      JSONP就是利用script标签的跨域能力来发送请求的。

      JSONP实现跨域的原理:返回函数调用并把参数放到函数里，让前端的函数对参数进行一个处理

    2. CORS，跨域资源共享，CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权访问那些资源

      CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

      CORS使用

       设置响应头

 response.setHeader("Access-Control-Allow-Origin","响应的url（一般设置为*）")
avatar
文章
阅读
粉丝