快速搞定前端JS面试 -- 第九章 JS-Web-API-Ajax

目录

一、XMLHttpRequest

1. Xhr.readyState 状态码

2. Xhr.status状态码(http协议)

二、跨域

1. 什么是跨域(同源策略)

2. JSONP 

3. CORS

三、ajax常用插件

1. 使用jQuery实现ajax

2. fetch

3. axios

四、问题解答

1. 手写简单的Ajax

2. 跨域以及解决方法


知识点

  1. XMLHttpRequest
  2. 状态码
  3. 跨域:同源策略,跨域解决方案

一、XMLHttpRequest

const xhr = new XMLHttpRequest()
xhr.open(“GET, ”/test.json”, true)    // true异步请求
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            alert(xhr.responseText)
        } else if (xhr.status === 404) {
            console.log('404 not found')
        }
    }
}
xhr.send(null)

1. Xhr.readyState 状态码

0-(未初始化)还没有调用send()方法

1-(载入)已经调用send()方法,正在发送请求

2-(载入完成)send()方法执行完成,已经接收到全部响应内容

3-(交互)正在解析响应内容

4-(完成)响应内容解析完成,可以在客户端调用(可以拿到responseText)

2. Xhr.status状态码(http协议)

2xx - 表示成功处理请求,如200

3xx - 需要重定向,浏览器直接跳转,如301(永久重定向) 302(临时重定向) 304(资源未改变)

4xx - 客户端请求错误,如404(请求地址有误) 403(客户端没有权限)

5xx - 服务器端有误

二、跨域

1. 什么是跨域(同源策略)

Ajax请求时,浏览器要求当前网页和server必须同源(安全)

同源:协议、域名、端口,三者必须一致

(例子:前端:http://a.com:8080/  server: https://b.com/api/xxx )

加载图片css js 可以无视同源策略



可用于统计打点,可以使用第三方统计服务

jsonp.js callback(name:'zhangsan')

jQuery实现jsonp

$.ajax({
    url: 'http://localhost:8002/x-origin.json',
    dataTtype: 'jsonp',   // 发送ajax请求
    jsonpCallback: 'callback',    // 函数名
    success : function(data) {
        console.log(data)
    }
})

     为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

    ajax 的核心是通过 XmlHttpRequest 获取非本页内容,而 jsonp 的核心则是动态添加

你可能感兴趣的:(Javascript)