发送网络请求的几种方式，多种跨域问题

发送网络请求的几种方式

1. 在浏览器中直接输入网址（手动输入）
2. 使用location.href = 'url’进行网络请求，(页面会发生跳转)
3. 使用带有src，herf属性的标签，请求可以发出，服务端也可以返回处理的结果（服务器端分辨不了用什么标签发出的请求），但是返回的结果能否被应用还要看浏览器（页面无法处理返回结果）
   (1)：这种情况适用与：服务端只需要接收一个请求，而不需要返回什么东西。

	<script src='url' />
	<img src='url' />
	<link href = 'url' />

4. 带有action属性的标签，例如from表单，也可以向后端发出请求，但是from表单发出请求之后也会页面跳转。

<from action='http://www.baidu.com' method='post'>
	<input text='text'  name="name"/>
    <input text='text'  age="age"/>
    <input text='submit'  value="提交"/>
</from>
http://www.baidu.com?name=ff&age=19 //这个是发送请求的url

5. ajax（可以代码控制，页面不会跳转，可以用js对返回的结果进行操作）

var xhr = null
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest() //IE6不支持
}else{
    xhr = new ActiveXObject('Microsoft.XMLHRttp'); //IE6专用的
}
xhr.open('get','http://developer.duyiedu.com/edu/testAjax')
xhr.send();

ajax涉及跨域的问题：

1. 哪些属于资源?
   (1)：js文件，（允许被跨域请求）。
   (2)：css文件，图片文件，音频/视频文件（都是允许被跨域请求的）。
   (2)：src属性的资源都是可以被跨域请求的，href资源大部分可以被跨域请求的。
2. 哪些资源算跨域请求的资源？
   (1)：后端接口的数据。
   (2)：其他域的Cookie。
   (3)：其他域的缓存。
3. 什么是其他域，怎样算跨域？
   (1)：页面本身：有协议，域名，端口，要请求的数据都是域。
   (2)：协议，域名，端口。有任何一个不一样就算是跨域访问。
4. 跨域的行为发生在哪里？
   (1)：即使发生跨域（协议，域名，端口号不一样）请求也能发送出去，同样服务器端也能正常接收到发送的请求，并且处理发送的请求，返回结果。
   (2)：浏览器能正常接收到返回的数据，但是当浏览器接收到这些数据的时候，发现当前页面的域和请求的域不同，所以判定为跨域，同时也不会将返回的结果传递给我们的代码。
   (3)总结：所以跨域发生在浏览器端，并且是浏览器接收数据的时候。
5. 解决跨域的几种方式
   (1)：后端配合我们解决
   ①：JSONP解决跨域（正常请求的时候，返回的数据都是JSON格式的，JSONP是一种特殊的格式。后端在会在返回结果之前将JSON格式转为JSONP格式，然后返回）。
   ②：后端设置Access-Control-Allow-Origin属性。
   (2)：后端不配合我们跨域
   ①：使用iframe进行跨域，这种有缺点：只能显示数据，不能控制数据。就类似与把一个网站内嵌到自己的网页中来。
   ②：使用后端代理进行跨域：比如我们想要访问别人的网站，从我们自己的后端进行跨域处理，然后将数据返回到前端

<iframe src='http://www.baidu.com' ></iframe>

JSONP跨域原理

当我们使用JSONP的时候：jQuery首先会判断是个否同源，如果同源，那么我们设置的请求方式是什么，就是什么。如果不是同源：无论我们设置什么请求方式，都会被转换成get方法，所以：我们使用JSONP跨域，就只能使用get方式。

$.ajax({
      url:"http://developer.duyiedu.com/edu/testJsonp",
      type:'get',
      dataType:'jsonp',
      success:function(data){
      console.log(data);
      }
})

1. 如果我们使用jQuery来实现JSONP跨域我么还能就会发现，当发送跨域请求的时候会带一个callback过去，请求的连接类似于下面这种：

https://developer.edu.com/edu/testJsonp?callback=jQuery34109692511248057492_1584351231976&_=1584351231977

返回的结果是：

jQuery34109692511248057492_1584351231976({"status":"ok","msg":"Hello!"})

我们通过比较发现：返回数据的括号外的数据，正是我们传入的callback名称。

我们使用JSONP来处理跨域的本质就是：利用script标签来实现的，因为script中的scr属性是允许跨域的，可以引用其他域的资源，浏览器不限制，但是浏览器会将返回的内容当作js代码来执行。

 var $ = {
            ajax: function (options) {
                var {
                    url,
                    type,
                    dataType,
                    success
                } = options;
                var targetProtocol = ""; //目标接口协议
                var targetHost = ""; //目标接口的host,host包含域名和接口
                // 如果url不带http,则访问的路径一定是相对路径,相对路径一定是同源的
                if (url.indexOf('http://') === 0 || url.indexOf('https://') === 0) {
                    var targetUrl = new URL(url);
                    targetProtocol = targetUrl.protocol;
                    targetHost = targetUrl.host;
                } else {
                    targetProtocol = location.protocol;
                    targetHost = location.host;
                }
                // 判断是否为jsonp,不是jsonp直接ajax请求发送
                if (dataType === 'jsonp') {
                    // 看是否是同源，如果同源，则发送正常的ajax请求,
                    if (location.protocol == targetProtocol && location.host == targetHost) {
                        var xhr = null;
                        if (window.XMLHttpRequest) {
                            xhr = new XMLHttpRequest()
                        } else {
                            xhr = new ActiveXObject('Microsoft.XMLHRttp'); //IE6专用的
                        }
                        xhr.open(type, url);
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState == 4 && xhr.status == 200) {
                                success(xhr.responseText);
                            }
                        };
                        xhr.send();
                    } else {
                    // 如果不同源，则执行下面的方法。
                        var callback = 'ff' + Math.floor(Math.random() * 100000) // 生成一个随机方法名
                        window[callback] = success; // 创建一个函数
                        //创建一个script标签
                        var script = document.createElement('scirpt');
                        // 将scirpt标签添加到页面上,添加之前判断有没有参数
                        if (url.indexOf('?') > -1) {
                            script.src = url + '&callback=' + callback;
                        } else {
                            script.src = url + '?callback=' + callback
                        }
                        document.head.appendChild(script);
                    }
                }
            }
        }

        $.ajax({
            url: "http://developer.duyiedu.com/edu/testJsonp",
            type: 'get',
            dataType: 'jsonp',
            success: function (data) {
                console.log(data);
            }
        })