AJAX入门

作者: qfstudy | 来源:发表于2018-04-17 20:58 被阅读4次

    处理跨域的主要方法

    1. JSONP
    2. CORS
      本文主要讨论CORS解决AJAX因为浏览器同源策略不能跨域请求数据的问题。

    1. JSONP
    JSONP跨域可以参考下面这篇博客
    JSONP跨域


    2. CORS
    关于CORS细节可以阅读阮一峰的跨域资源共享 CORS 详解

    跨域资源共享 CORS

    1. 跨域资源共享CORS(Cross-origin resource sharing)

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而解决了AJAX不能跨域请求的问题。

    1. CORS需要浏览器和服务器同时支持。

    整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

    因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

    CORS允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。


    AJAX简介
    AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术)

    AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    XMLHttpRequest对象是浏览器提供的一个API,用来顺畅地向服务器发送请求并解析服务器响应,当然整个过程中,浏览器页面不会被刷新。

    创建AJAX步骤:

    1.创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    兼容各个浏览器的创建方法

    function createRequest (){
        try {
            xhr = new XMLHttpRequest();
        }catch (tryMS){
            try {
                xhr = new ActiveXObject("Msxm12.XMLHTTP");
            } catch (otherMS) {
                try {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }catch (failed) {
                    xhr = null;
                }
            }
        }
        return xhr;
    }
    

    2.准备请求
    xhr.open(method,url,async);

    • open() 的第一个参数是HTTP请求方法 - 有GET,POST,HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母,否则其他一些浏览器(比如FireFox)可能无法处理这个请求。
    • 第二个参数是要作为请求发送目标的URL。
    • 第三个参数是true或false,表示请求是异步还是同步。true是异步,默认true。

    3.发送请求
    xhr.send();
    send() 方法的参数可以是任何你想发送给服务器的内容

    4.处理响应

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            console.log(xhr.responseText);
        }
    }
    
    1. onreadystatechange :当处理过程发生变化的时候执行下面的函数
    2. readyState状态值
    • 0:请求未初始化。
    • 1:正在加载) or (已建立服务器链接)
    • 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
    • 3:请求在处理中;
    • 4:响应已完成。
    1. responseText:服务器以文本字符的形式返回

    2. responseXML:获得 XML形式的响应数据

    3. 对象转换为JSON格式使用JSON.stringify

    4. json转换为对象格式用JSON.parse()

    5. 返回值一般为json字符串,可以用JSON.parse(xhr.responseText)转化为JSON对象


    代码实现如下:

    HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>  
        <button id="myButton">点我</button>
        <script src="./main.js"></script>
    </body>
    </html>
    

    JS

    myButton=document.getElementById('myButton')
    myButton.addEventListener('click',(e)=>{
        let xhr=new XMLHttpRequest()
        xhr.onreadystatechange=()=>{
           if( xhr.readyState===4){
               console.log("请求响应都完毕了")
               if( xhr.status>=200&& xhr.status<300){
                   console.log("请求成功")
                   console.log(typeof  xhr.responseText)//判断返回数据的类型是String
                   console.log( xhr.responseText)
                   let string= xhr.responseText
                   let object=window.JSON.parse(string)
                   console.log(typeof object)
                   console.log(object)
               }else if( xhr.status>=400){
                   console.log("请求失败")
               }
           }
        }
        xhr.open('GET','/xxx')
        xhr.send()
    })
    
     if(path==='/xxx'){
        response.statusCode=200
        response.setHeader('Content-Type', 'text/json;charset=utf-8')
        response.write(`
        {
          "note":{
            "to":"xxx",
            "from":"yyy",
            "content":"hello"
          }
        }
        `)
        response.end()
      }
    

    当发送请求的时候,就会根据xml.open('GET','/xxx')找到对应的请求路径。在本文是找到/xxx路径,然后返回所请求的数据,在浏览器运行结果如下。

    • 1.png
    • 2.png

    CORS跨域
    关于CORS细节可以阅读阮一峰的跨域资源共享 CORS 详解

    HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>  
        <button id="myButton">点我</button>
         <script src="./main.js"></script>
    </body>
    </html>
    

    JS

    myButton.addEventListener('click',(e)=>{
        let xhr=new XMLHttpRequest()
        xhr.open('GET','http://jack.com:8002/xxx')
        xhr.onreadystatechange=()=>{
           if(xhr.readyState===4){
               console.log("请求响应都完毕了")
               if(xhr.status>=200&&xhr.status<300){
                   console.log("请求成功")
                   console.log(typeof xhr.responseText)
                   console.log(xhr.responseText)
                   let string=xhr.responseText
                   let object=window.JSON.parse(string)
                   console.log(typeof object)
                   console.log(object)
               }else if(xhr.status>=400){
                   console.log("请求失败")
               }
           }
        }
        xhr.send()
    })
    
    if(path==='/xxx'){
        response.statusCode=200
        response.setHeader('Content-Type', 'text/json;charset=utf-8')
        response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')
        response.write(`
        {
          "note":{
            "to":"xxx",
            "from":"yyy",
            "content":"hello"
          }
        }
        `)
        response.end()
      }
    

    可以看到当代码没有下面这一行代码时AJAX并不能跨域请求response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')的时候,结果如下

    • 3.png

    从结果可以看出,因为浏览器的同源策略,AJAX不能跨域请求

    解决的办法是添加response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')

    • 4.png

    代码下载:Github


    相关文章

      网友评论

        本文标题:AJAX入门

        本文链接:https://www.haomeiwen.com/subject/lpopkftx.html