第三十四节: JavaScript Ajax与跨域

作者: 时光如剑 | 来源:发表于2020-11-06 20:16 被阅读0次

珠峰 AJAX --- JSONP跨域
第三十四节: JavaScript Ajax与跨域
37道WEB前端开发面试题之JavaScript篇章！
ajax跨域请求
解决ajax跨域问题
一个小例子学习JSONP的基本使用
前端跨域
readystate=1
学习规划
跨域

1.理解Ajax

1.1. 什么是ajax

Asynchronous JavaScript and xml （异步JavaScript和XML）
主要作用是用来处理前后端数据传输

2005年由美国人Jesse James Garrett推广，并取名。

2. 提交方式

1.1. GET请求

通过url地址来提交数组

https://jsonplaceholder.typicode.com/posts?userId=1

缺点

暴露隐私，所有的表单的字段的值都是通过URL来传输的，明码传输，能够看见浏览器的历史记录，就能够看见某一次的表单值；
数据内容不能太大，

优点

GET请求又有天生优势：便于分享网址。

2.2. Post请求

POST请求也可以让用户的数据传输到服务器上，但是不是利用URL，而是利用HTTP request报文头。

优点

安全，不会通过网址来暴露我们的表单；
内容不限量，post请求是可以无限量的，表单域填多少都没有问题。

缺点：

地址不可以分享，很明显post请求不影响URL。

GET 与POST请求对比

给服务器传递的数据量

get: 最多传 2k

post : 原则上没有限制,
安全方面

post相对而言数据传递较为安全
传递的数据格式不一样

get: 在url地址后边以请求字符串的形式传递参数

post: 是以json对象的方式传递

3.Ajax使用

3.1. 创建ajax对象

原生Ajax有兼容问题

3.1.1主流浏览器

var xhr = new XMLHttpRequest();

IE 现在也在像主流的靠拢,IE很多版本也兼容这种写法

3.1.2 IE 6,7,8

var xhr = new ActiveXObject('Microsoft.XMLHTTP');

3.1.3 兼容

if(typeof XMLHttpRequest != 'undefined'){ // 主流
    var xhr = new XMLHttpRequest();
}else{
    var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0')
}

3.2. 服务器的请求配置

配置对服务器请求的配置需要使用ajax对象上的open方法

open字面意思是打开，就是打开一个请求。open之后并没有真正的发送请求，

3.2.1 open方法接受三个参数

xhr.open(要发送的请求类型,路径,是否使用异步);

第一个参数，请求方式,get请求还是post请求

第二个参数，请求的服务器路径

第三个参数，表示是否是异步处理，true为异步

  xhr.open('get','http://localhost/index.php');

3.3. 发送请求

发送请求是用send()方法

里面的参数表示http requset报头里面携带内容。

get请求报头里面没有内容，post请求有内容。

get请求:

xhr.send(null);

post请求,写的也是类似于get请求的参数字符串：

xhr.send("name=kaola&age=18");

例子,发送请求

<button id="box">按钮</button>

<script>
    // 点击box发送ajax请求
    box.onclick = function(){
        // 创建ajax对象,对象调用成员实现对服务器的请求
        // 1.创建ajax对象
        var xhr = new XMLHttpRequest();

        // 2.创建一个新的http请求,(打开浏览器,输入请求地址)
        // xhr.open(请求的方式(get/post),请求的地址[,异步同步请求])
        xhr.open('get','http://localhost/index.php');

        // 3.发送请求
        // xhr.send(传递post请求的数据/ get请求设置 null)
        xhr.send(null)
    }
</script>

3.4 接受服务器的返回信息

在浏览器上发送的请求由浏览器来接受信息,

现在是通过ajax发送的请求,当然是还有ajax来接受信息

浏览器可以接收的信息ajax都可以接收,例如字符串,HTML标签,CSS样式,xml内容,json内容等等

3.4.1 接受信息的属性

ajax对象的responseText属性负责接受数据

xhr.responseText;

3.4.2 ajax对象的成员

属性:

responseText 以字符串形式接受后台返回的信息

不能直接获取,ajax请求是异步的,同时后台返回的数据是以数据流的形式返回的,所以要通过

状态监测数据是不是返回完了

readyState 表示ajax的状态

ajax一共有5种状态

0   ==> 创建ajax对象完毕
1   ==> 调用了open()方法
2   ==> 调用了send()方法
3   ==> 服务器端只返回了一部分数据
4   ==> 服务器端数据全部返回,ajax请求完成

例子:

   // 点击box发送ajax请求
   box.onclick = function(){
       // 创建ajax对象,对象调用成员实现对服务器的请求
       // 1.创建ajax对象
       var xhr = new XMLHttpRequest();
   
       // 2.创建一个新的http请求,(打开浏览器,输入请求地址)
       // xhr.open(请求的方式(get/post),请求的地址[,异步同步请求])
       xhr.open('get','http://localhost/index.php');
   
       // 3.发送请求
       // xhr.send(传递post请求的数据/ get请求设置 null)
       xhr.send(null);
   
       // 4.获取返回数据,但是此时没法获得
       if(xhr.readyState == 4 ){
           alert(xhr.responseText)
       }
   }

但是这里send发送是一个异步的过程,直接判断状态,会如果状态不是4,会导致无法执行if里面的语句

需要通过事件实时监听状态的变化

onreadystatechange 事件,该事件会感知ajax状态readyState的变化,只要状态一变化,事件就会执行

感知对象状态变化

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    console.log(xhr.readyState)
}
//每次状态变化都会打印状态,但是不会打印0,因为0没有对比,

所以程序整个应该改为

   // 点击box发送ajax请求
   box.onclick = function(){
       // 创建ajax对象,对象调用成员实现对服务器的请求
       // 1.创建ajax对象
       var xhr = new XMLHttpRequest();
   
   
       // 2.创建一个新的http请求,(打开浏览器,输入请求地址)
       // xhr.open(请求的方式(get/post),请求的地址[,异步同步请求])
       xhr.open('get','http://localhost/index.php');
   
       // 3.发送请求
       // xhr.send(传递post请求的数据/ get请求设置 null)
       xhr.send(null);
   
       // 4.监听状态变化事件,获取后台返回数据
       xhr.onreadystatechange = function(){
           if(xhr.readyState == 4){
               alert(xhr.responseText)
           }
       }
   
   }

HTTP 状态码

每一次http请求，会根据请求是否成功，有不同的状态码。更加状态码处理结果

// 点击box发送ajax请求
box.onclick = function(){
    // 创建ajax对象,对象调用成员实现对服务器的请求
    // 1.创建ajax对象
    var xhr = new XMLHttpRequest();

   // 2.创建一个新的http请求,(打开浏览器,输入请求地址)
   // xhr.open(请求的方式(get/post),请求的地址[,异步同步请求])
   xhr.open('get','http://localhost/index.php');

   // 3.发送请求
   // xhr.send(传递post请求的数据/ get请求设置 null)
   xhr.send(null);

   // 4.监听状态变化事件,获取后台返回数据
   xhr.onreadystatechange = function(){
       if(xhr.readyState == 4){
           if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
               alert(xhr.responseText)
           }
       }
   }

}

3.5. 封装ajax


function ajax(json){
    var method = json.method.toUpperCase() || 'GET';
    var data = json.data || {};
    var xhr;
    if(typeof XMLHttpRequest != undefined){ // 主流
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0')
    }

    switch(method){
        case 'GET':
            xhr.open(method,json.url+'?'+jsonUrl(json.data),true )
            xhr.send(null);
            break;
        case "POST":
            xhr.open(method,json.url,true );
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.send(jsonUrl(json.data));
            break;

    }

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                json.success(xhr.responseText)
            }else{
                json.error(xhr.responseText)
            }
        }
    }
    
    // 处理数据
    function jsonUrl(data){
        var arr = [];
        for(var key in data){
            arr.push(key+'='+data[key]);
        }
        return arr.join('&')
    }
}

4.. 跨域

4.1. 同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

4.2 ajax不能跨域的

$.ajax({
    url: 'http://127.0.0.1/a.txt',
    type: 'get',
    success(data) {
        console.log(data)
    },
    error(err) {
        console.log(err)
    }
})

4.3 解决跨域问题

4.3.1 cors 解决跨域问题

是一种解决跨域的技术

在后台中设置响应投

Access-Control-Allow-Origin: *

同域请求的html

<h2>
    <button id='btn'>无为</button>
</h2>

<script>
    btn.onclick = function () {
        var xhr = new XMLHttpRequest;

        xhr.open('get', 'index.php')

        xhr.send()

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                alert(xhr.responseText)
            }
        }
    }
</script>

4.3.2. jsonp解决跨域

JSON（JavaScript Object Notation）和JSONP（JSON with Padding）虽然表面上只有一个字母差别，实际上是两种不同的东西。JSON是一种数据交换格式，而JSONP是一种被开发人员创造出来的一种非官方的跨域数据交互格式

4.3.3. Jsonp例子

var btn = document.getElementById('btn');
var text = document.getElementById('text');
var box = document.getElementById('box')


text.oninput = function () {
    var script = document.createElement('script');
    script.src = 'https://www.baidu.com/sugrec?prod=pc&wd=' + this.value + '&cb=callback';
    document.body.appendChild(script)

}

var ul = document.createElement('ul');
function callback(json) {

    var data = json.g || [];

    var len = data.length < 5 ? data.length : 5;

    ul.innerHTML = '';
    data.forEach((item, i) => {

        if (i < 5) {
            console.log(item)
            ul.innerHTML += `<li>
<a href='https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=${item.q}&oq=wuwei&rsv_pq=e7dc2584000228ca&rsv_t=dda6iiIYXdFazi91l%2Fk3IyQMCXIamUeu2cfM8gS%2BOJOxEoTR6xA%2Bp3b%2FsO0&rqlang=cn&rsv_enter=0' target='_self'>${item.q}</a>  
</li>`;
            console.log(ul)
        }
    })

    box.appendChild(ul)
}

btn.onclick = function () {
    location.href = 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=' + text.value + '&oq=wuwei&rsv_pq=e7dc2584000228ca&rsv_t=dda6iiIYXdFazi91l%2Fk3IyQMCXIamUeu2cfM8gS%2BOJOxEoTR6xA%2Bp3b%2FsO0&rqlang=cn&rsv_enter=0'
}

4.3.4 jQuery 的jsonp的使用

text.oninput = function () {
    $.ajax({
        url: 'https://www.baidu.com/sugrec',
        data: {
            prod: "pc",
            wd: this.value,
            cb: "callback"
        },
        dataType: 'jsonp',
        jsonpCallback: 'callback',
        success: function (data) {
            console.log(data)
        }
    })
}

https://suggest.taobao.com/sug?code=utf-8&q=T%E6%81%A4&callback=cb 淘宝联想jsonp

珠峰 AJAX --- JSONP跨域
珠峰 AJAX --- JSONP跨域AJAX(异步 javascript and XMLHTTPReq...
第三十四节: JavaScript Ajax与跨域
1.理解Ajax 1.1. 什么是ajax Asynchronous JavaScript and xml （异步...
37道WEB前端开发面试题之JavaScript篇章！
ajax, 跨域, jsonp 参考：《JavaScript》高级程序设计第21章：Ajax和Comet jQu...
ajax跨域请求
ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...
解决ajax跨域问题
Jsonp解决ajax跨域问题 CORS解决ajax跨域问题
一个小例子学习JSONP的基本使用
在JavaScript中Ajax是无法跨域的，当协议或者域名或者端口任一不同时，都会出现跨域，跨域处理的其中一种方...
前端跨域
什么是ajax跨域 ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参...
readystate=1
readystate==1问题排除，ajax不支持跨域，javascript中url host+port必须和系统...
学习规划
这是一个关于对javascript主题学习的工程主题一：ajax 原生xhr对象跨域处理 ajax请求进度条 ...
跨域
跨域：ajax 不能跨域img css script 标签可以跨域例如：《img src="images/...