前端笔记(JS-Web-API-Ajax)

爱吃薯条的Ray
213 阅读2分钟

题目

手写一个简易的ajax

function ajax(url){
    const p = new Promise((reslove,reject) => {
        const xhr =new XMLHttpRequest()
        xhr.open('GET','url',true)
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    reslove(
                        JSON.pase(xhr.responseText)
                    )
                }else if(xhr.status === 404){
                    reject(
                       new Error("404 not found")
                    )
                }
            }
        }
      xhr.send(null)
    }) 
    return p
}
ajax(url)
.then(
res=>{console.log}
).catch(err => {
    console.log(err)
})

跨域的常用实现方式

  • JSONP
  • CORS

知识点

XMLHttpRequest

//GET请求
const xhr = XMLHttpRequest()
//true 是异步，false是同步,url是请求地址,GET是请求方式
xhr.open('GET','url',true) 
xhr.onreadystatechange = function(){
    // 这里函数异步执行
    if(xhr.readyState === 4){// 4 完成
        if(xhe.status ====200){// 状态码 200 成功
            console.log(JSON.Parse(xhr.responseText)) //转化为JSON格式
        }else {
            console.log("其他情况")
        }
    }
}
xhr.send(null) //传数据GET请求不传

// POST请求
const xhr = new XMLHttpRequest()
xhr.open('POST','url',true) 
xhr.onreadystatechange = function(){
    if(xhr.readyState ===4){
        if(xhr.status===200){
            JSON.parse(xhr.responseText)
        }else{
            console.log("其他情况")
        }
    }
}
const postData = {
    userName = 'zhangsan',
    password:'xxx'
}
xhr.send(JSON.stringify(postData)) //必需发送字符串

状态码

xhr.readyState

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

xhr.status

  • 2xx - 表示成功除理请求 如200
  • 3xx - 需要重定向，浏览器直接跳转，如301 302 304
  • 4xx - 客户端请求错误， 如404
  • 5xx - 服务器端错误 如500 501 502

跨域：同源策略，跨域解决方案

同源策略

  • ajax请求时，浏览器要求当前网页和server必需同源
  • 同源：协议、域名、端口必需一致
  • 前端：http://a.com:8080;server:https:b.com/api/xxx

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

<img src=xxx>
<link href=xxxx>
<script src=xxxx>

用途

  • img可用于打点统计，统计网站可能是其他域，如百度站长
  • link和script标签可以使用CDN，CDN的也是其他域
  • script标签可以用于JSONP

跨域

  • 所有跨域请求都必需经过信息提供方允许
  • 如果未经允许即可获取，那是浏览器同源策略出现漏洞

JSONP

原理

  • 加载URL请求时不一定服务器真正有一个相应的文件。服务器可以根据请求，动态生成一个文件返回,只要其符合html格式要求。这点同样适用于js请求
  • script 可以绕过跨域数据限制，服务器可以任意动态拼接数据返回。所以，script就可以获取跨域数据，只要服务端支持

代码

    <script>
    window.callback = function (data) {
    // 这是我们跨域得到的信息
    console.log(data)
    }
    </script>
    <script src="https://xxx.com/api.js">
    <!--以上将返回 callback({x:100,y:200})-->

服务器端设置 http header

  • 另外一个解决跨域的简洁方法，需要服务器端来做
  • 但是作为交互方，前端必须知道这个方法
  • 是将来解决跨域问题的一个趋势 如kor2-cors
// 注意不同后端语言写法不一样
// 第二个参数填写允许跨域的域名称，不建议直接写 '*'
	response.setHeader("Access-Control-Allow-Orgin", "http://a.com,http://b.com")
    response.setHeader("Access-Control-Allow-Header", "X-Requested-With");
    response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
// 接收跨域的cookie
response.setHeader('Access-Control-Allow-Credentials','true');

实际常用的插件：

avatar
文章
阅读
粉丝