深刻浅出篇 — ajax的诞生 & 跨域

网络-深刻浅出篇文章：

• 初识网络
• Http协议和Ip地址
• 域名与DNS解析
• Jsonp原理

一. AJAX

ajax的诞生：

1. 发送网络请求的方式：

• 在浏览器中直接输入网址 (其没法用代码控制)
• 在控制台输入location.href="url" ,能够发送网络请求，可是页面会发生跳转(页面会跳转)
• 带有src属性的标签 —— 例如img ，请求是能够发出的，服务端是能够处理的而且也是能够返回的，可是返回后，可否被应用，还要看浏览器(页面没法处理返回结果)
• 带有href属性的标签 —— 例如link ，请求是能够发出的，服务端是能够处理的也是能够返回的，可是返回后，可否被应用，还要看浏览器(页面没法处理返回结果)
• 带有action属性的标签 例如form表单，也能够向后端发出请求，但form表单发送请求后也会页面跳转(页面会跳转)

2. ajax诞生：

• 就是由于但愿有一种方式，既能够用代码控制，并且页面不会跳转，而且服务端返回的结果咱们能够用JS继续处理，因此就有了ajax

ajax的应用：

1. ajax 全名： async javascript and xml

2. ajax 的请求要素：

• 请求方式： Get/Post
• url
• 但ajax受到浏览器同源策略的限制，同源策略是浏览器提出的一种安全机制

3. 发送请求-兼容写法：

例：

var xhr = null
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()                      //经常使用浏览器自带
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHttp")    //IE6自带
    }
    xhr.open("get", "http://www.baidu.com", true)       // 第三个参数 true 表明异步
    xhr.send()  //这就能够发送了 但有可能有跨域问题，把xhr.send放在xhr.onreadystatechange后比较好
复制代码

3. 原生js发送ajax

例：

var xhr = null
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()                      //经常使用浏览器自带
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHttp")    //IE6自带
    }
    console.log(xhr.readystate)                         //  0
    xhr.open("get", "http://www.baidu.com", true)       // 第三个参数 true 表明异步
    console.log(xhr.readystate)                         // 1
    
    // 这部分是该部份内容新增
    xhr.onreadystatechange = function () {
    
        console.log(xhr.readystate)  
        
        //readystate 为xhr的一个属性，其会随着ajax发送的进度变化而变化，刚开始建立xhr时是0，open以后是1，如示例
        
        // readystate == 4时 表示请求完成 已经接收到数据
        
        // status == 200 网络请求 ，请求到的结果会有一个状态码，来表示这个请求是否正常
        // 200表示请求成功
        // http状态码
        // 2**表示成功 
        // 3**表示重定向 
        // 4**表示客户端错误，404页面没有找到
        // 5**表示服务端错误
        if (xhr.readyState == 4 && xhr.status == 200) {
        
            console.log(xhr.responseText)
            //若是有返回的结果，返回的结果存在xhr.responseText这个属性里
            
            var data = JSON.parse(xhr.responseText)
            // 将jsonz数据转换为js对象
            
            //扩展知识：将js对象转换为json数据
            //JSON.stringify(data)
            
        }
    }
    xhr.send() 
    //至此就完成了这种方式，既能够用代码控制，并且页面不会跳转，而且服务端返回的结果咱们能够用JS继续处理
复制代码

二. 跨域：

什么是跨域：

• 页面自己与要请求数据的网址 —— 协议 域名 端口号 有任意一个不同的 就算跨域

跨域访问资源：

1. 哪些东西属于资源

• js文件，可是js文件是容许被跨域请求的
• css文件 ，jpg，png 等（src属性的资源都是能够被跨域请求的，href 资源大部分都是能够被跨域请求的）

例 —— img请求：

<img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=4b1e0ff44da98226accc2375ebebd264/faf2b2119313b07e6a5add8902d7912396dd8c48.jpg" alt="">
// 虽然也是跨域的可是是能够被跨域请求的
复制代码

2. 哪些资源算跨域请求的资源

• 后端接口的数据
• 其余域的cookie
• 其余域的缓存

解决跨域的方法 —— 虽然跨域了，可是咱们依然须要这个数据：

1. 后端(这里的后端，是指的别人的后端)配合咱们进行跨域：

• JSONP(正常状况下，返回的数据都是JSON格式，JSONP是一种特殊的格式)
• 后端设置Access-Control-Allow-Origin属性以支持跨域

2. 后端不配合咱们进行跨域

• iframe进行跨域 (只能显示不能控制)

例：

<iframe src="https://www.baidu.com" frameborder="0" width="600" height="600"></iframe>
//虽然跨域，可是能够跨域请求到
复制代码

• 经过后端代理(指本身的后端)的

JSONP的使用:

1. JSONP的特殊格式

• 发送的时候，会带上一个参数callback
• 返回的结果不是Json 而是 callback（json数据）

2. 使用JQ发送jsonp请求

• $.ajax({
        url:"https://www.baidu.com",
        type:"get",
        dataType:"jsonp" //返回类型
        success : function(data){  //成功后返回的数据
        console.log(data);
        }
    })
  
    //JSonp跨域，只能使用get方法， 若是咱们设置的是post方法，JQuery会自动转换为get方法
    //但不是在JSONP里面只能使用get方法
    //首先JQuery会先判断是否同源，若同源，那么设置的是什么就是什么   
    //若不是同源，不管设置的是什么，都改成get
  复制代码

封装ajax：

//封装
        function ajax(mode, url, callback, data, flag) {
        // 兼容
        var xhr = null
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest() //经常使用浏览器自带
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHttp") //IE6自带
        }

        //事件
        xhr.onreadystatechange = function () {

            if (xhr.readystate == 4) {
                if (xhr.status == 200) {
                    callback(xhr.responseText)
                } else {
                    console.log('error')
                }

            }
        }
        
        //格式要求
        mode = mode.toUpperCase();      // 将请求方式变为大写的
        if (mode == 'GET') {
            // get请求要把请求参数拼接到地址里面
            xhr.open(mode, url + '?' + data, flag) // 第三个参数 true 表明异步
            xhr.send()
        } else if (mode == 'POST') {
            xhr.open(mode, url, flag)
            
            // 设置Content-type 请求头  ，设置成相应的数据格式， 此处为数据传送的编码格式
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            
            //post请求必须把请求参数放到请求体里面
            xhr.sed(data)
        }
    }复制代码