前端不得不知道的Ajax,以及要调用后端数据需要跨越的跨域大山

AJAX和跨域

  • 引言
  • 正文
  • 一、AJAX请求
    • 1、模拟get和post请求
    • 2、封装一个简易的AJAX
  • 二、状态码
    • 1、xhr.readyState
    • 2、xhr.status
  • 三、跨域
    • 1、同源策略
      • (1)同源策略是什么
      • (2)为什么浏览器会有同源策略?
      • (3)同源策略限制内容有哪些?
      • (4)加载图片、js和css时可以无视同源策略
    • 2、跨域解决方案
      • (1)跨域是什么
      • (2)解决跨域的方式
        • 1)JSONP(客户端操作)
        • 2)CORS(服务器操作)
  • 结束语

引言

ajax对于前端来说是一个特别基础也特别实用的一个功能,基本上我们目前访问的很多网页都有用到 ajax 的功能。接下来开始讲解关于AJAX请求,以及关于跨域的一些内容。

正文

一、AJAX请求

Ajax ,即 Asynchronous Javascript And XML(异步JavaScript和XML)。

在实现 Ajax 之前,我们先来了解下 XMLHttpRequestXMLHttpRequest 是网页实现 AJAX 最主要的一个 API 。可能有很多同学知道 AJAX ,也用过 AJAX ,但是却不知道它是基于 XMLHttpRequest 来实现的。

那么接下来我们用 XMLHttpRequest 这个 API 来模拟一个 getpost 请求。

1、模拟get和post请求

(1)模拟get请求:

/**
 * 使用xhr模拟实现GET请求
 */
const xhr = new XMLHttpRequest();
xhr.open('GET', '/test.json', true); //false表示同步请求,true表示异步请求
xhr.onreadystatechange = function () {
     
    // 这里的函数异步执行
    if(xhr.readyState === 4){
     
        if(xhr.status === 200){
     
            // console.log(
            //     JSON.parse(xhr.responseText)
            // );
            alert(xhr.responseText);
        }
    }
}
// 因为是get请求,所以只要发送null就好
xhr.send(null);

(2)模拟post请求:

/**
 * 使用xhr模拟实现post请求
 */
const xhr = new XMLHttpRequest();
//模拟请求一个登录接口
xhr.open('POST', '/login', true); //false表示同步请求,true表示异步请求
xhr.onreadystatechange = function(){
     
    if(xhr.readyState === 4){
     
        if(xhr.status === 200){
     
            console.log(
                JSON.parse(xhr.responseText)
            );
            alert(xhr.responseText);
        }else{
     
            console.log('其他情况');
        }
    }
}

const postData = {
     
    userName: 'zhangsan',
    password: 'xxx'
}

xhr.send(JSON.stringify(postData));

2、封装一个简易的AJAX

function ajax(url){
     
    const p = new Promise((resolve, reject) => {
     
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function(){
     
            //状态码的解析详细看第二点
            if(xhr.readyState === 4){
     
                if(xhr.status === 200){
     
                    resolve(
                        JSON.parse(xhr.responseText)
                    );
                }else if(xhr.status === 404){
     
                    reject(new Error('404 not found'));
                }
            }
        }
        xhr.send(null);
    });
    return p;
}

const url = '你的json数据路径';
ajax(url)
.then(res => console.log(res))
.catch(err => console.error(err));

二、状态码

看完上面的模拟过程之后,我们来讲解其中的几个知识点。

1、xhr.readyState

readyState状态值 readyState含义
0 (未初始化)- 还没有调用send()方法
1 (载入)- 已调用send()方法,正坐在发送请求
2 (载入完成)- send()方法执行完成,已经接收到全部响应内容
3 (交互)- 正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用

2、xhr.status

status状态值 status含义
2xx 表示成功处理请求,如200
3xx 需要重定向,浏览器直接跳转,如301 302 304
4xx 客户端请求错误,如404 403
5xx 服务器端错误

三、跨域

1、同源策略

(1)同源策略是什么

同源策略是浏览器自带的一种安全策略,它是指网址中的协议域名端口三个都相同时才能互相访问,即若协议、域名、端口有一个不相同时,浏览器禁止页面加载或执行与自身不同域的脚本。

(2)为什么浏览器会有同源策略?

因为如果没有同源策略,别人就可以轻松的获取我们网站的 cookie 信息,或是对网页进行 DOM 操作;

这是一件非常恐怖的事情,尤其是 cookie 信息,它里面存在着 sessionID ,这是与服务端的 session 会话的重要凭证,如果被别人得到了 cookie ,有很大可能会造成数据被盗取等后果。

(3)同源策略限制内容有哪些?

  • 存储在浏览器中的数据,如 localStroageCookieIndexedDB 不能通过脚本跨域访问;
  • 不能通过脚本操作不同域下的 DOM
  • 不能通过 ajax 请求不同域的数据。

(4)加载图片、js和css时可以无视同源策略




                    
                    

你可能感兴趣的:(JavaScript,ajax,js,javascript,前端,面试)