Ajax,JSONP以及跨域问题

发布时间：2020-12-14 23:57:15 所属栏目：资源来源：网络整理

导读：没用过裸的Ajax 也没听过jsonp，也不了解跨域问题，emmm… 参考： http://www.runoob.com/ajax/ajax-tutorial.html https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6

没用过裸的Ajax 也没听过jsonp，也不了解跨域问题，emmm…

参考：

http://www.runoob.com/ajax/ajax-tutorial.html

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000

https://segmentfault.com/a/1190000015597029

http://ghmagical.com/article/page/id/AASiankfBJWp

Ajax，Asynchronous JavaScript and XML，直译就是异步的JavaScript和XML，其实就是使用JavaScript执行异步网络请求，不局限XML，可以有多种格式。

好处就是使用js获取数据，再用js更新页面，就不需要刷新，重新加载整个页面了。

Ajax使用XMLHttpRequest与后台进行交互

其实Ajax的实现代码真的很简单… （刚好在开一个9002端口的后台服务……

Document

    </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; fail(code) {
        const infoDiv </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;info</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;)
        infoDiv.innerHTML </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; code
        console.log(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;fail:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;+</span><span style="background-color: #f5f5f5; color: #000000;"&gt; code)
    }

    </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; request;
    </span><span style="background-color: #f5f5f5; color: #008000;"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000;"&gt;*
     * 对于低版本的IE，需要换一个 ActiveXObject 对象
     * 通过检测 window 对象是否有 XMLHttpRequest 属性来确定浏览器是否支持标准的 XMLHttpRequest
     </span><span style="background-color: #f5f5f5; color: #008000;"&gt;*/</span>
    <span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (window.XMLHttpRequest) {
        request </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;new</span><span style="background-color: #f5f5f5; color: #000000;"&gt; XMLHttpRequest();
    } </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span><span style="background-color: #f5f5f5; color: #000000;"&gt; {
        request </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;new</span><span style="background-color: #f5f5f5; color: #000000;"&gt; ActiveXObject(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;Microsoft.XMLHTTP</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
    }

    request.onreadystatechange </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; () { </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt; 状态发生变化时，函数被回调</span>
        <span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (request.readyState </span><span style="background-color: #f5f5f5; color: #000000;"&gt;===</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;4</span><span style="background-color: #f5f5f5; color: #000000;"&gt;) { </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt; 成功完成</span>
            <span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt; 判断响应结果:</span>
            <span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (request.status </span><span style="background-color: #f5f5f5; color: #000000;"&gt;===</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;200</span><span style="background-color: #f5f5f5; color: #000000;"&gt;) {
                </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt; 成功，通过responseText拿到响应的文本:</span>
                <span style="background-color: #f5f5f5; color: #0000ff;"&gt;return</span><span style="background-color: #f5f5f5; color: #000000;"&gt; success(request.responseText);
            } </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span><span style="background-color: #f5f5f5; color: #000000;"&gt; {
                </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt; 失败，根据响应码判断失败原因:</span>
                <span style="background-color: #f5f5f5; color: #0000ff;"&gt;return</span><span style="background-color: #f5f5f5; color: #000000;"&gt; fail(request.status);
            }
        } </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span><span style="background-color: #f5f5f5; color: #000000;"&gt; {
            </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt; HTTP请求还在继续...</span>

}
}

    </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt; 发送请求:</span>

request.open('GET','http://127.0.0.1:9002/user/info');
request.send();
</script>
</body>
</html>

其中的函数

（异步）或 send(string)
string：仅用于 POST 请求

setRequestHeader(header,value)
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值

例
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

至于?onreadystatechange 肯定就是一个回调函数啦，每当 readyState 属性改变时，就会调用该函数。那个…异步才需要回调函数嘛…

readyState 含义

01234: 请求已完成，且响应已就绪

status 含义（就是HTTP状态码

200304400401403404405407414500：服务器内部错误。

responseText 和 responseXML

然后就是跨域问题。

首先要知道跨域问题是因为浏览器的安全策略：同源策略。

默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。域名，协议，端口号都要相同。

也就是说小一去访问小夏，然而小夏家有防盗门，进不去。你总不能怪别人有防盗门吧。这时小一一个人，无论做什么都是没办法进去的，想要进去，只有小夏帮你。你们对个暗号，小夏帮你开门，或者小夏给你钥匙，录个指纹之类的。

同理，跨域问题，光靠前端是没办法解决的，有了后端帮助才可以解决，比如把门打开……嗯……

1. CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

我的理解就是在后台配置一下…………比如我用Spring Boot写的后台代码……

"/**"

正常点……

对于非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）这种情况下除了设置origin，还需要设置以及

2. 还有一种解决方式是代理，前端把请求发给同域的代理服务器，代理服务器再转发给真正的服务器。

3. 就是我要学习的JSONP了，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源。

通过js创建一个script标签然后添加src，这样就会调用这个src的请求，所以只能是get请求。其实真的也是很简单的~前端页面：

jsonp 从后台获取数据：

后端返回数据用 callback() 包裹起来，这样就相当于返回的那个js文件在调用 callback 函数，需要的逻辑直接写到指定的 callback 函数就可以了，很机智的方法。

@RequestMapping(value="/testJSONP",method = callback + '(' + (a + b) + ')'

请求信息

返回一个字符串

抄一遍大神把ajax和jsonp合一起的代码，不到100行，很简单。

params </span>= params ||<span style="color: #000000;"&gt; {}
params.data </span>= params.data ||<span style="color: #000000;"&gt; {}

params.jsonp </span>? jsonp(params) : json(params) <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 根据params中是否有jsonp参数判断是不是jsonp请求</span>

<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; json(params) {
    params.type </span>= (params.type || 'GET').toUpperCase() <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 默认使用get方法</span>
    params.data = formatParams(params.data) <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 把参数对象改为参数字符串</span>
    let xhr = <span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; XMLHttpRequest()
    xhr.onreadystatechange </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;() {
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; readyState 属性表示请求/响应过程的当前活动阶段 4为完成 已经接收到全部响应数据</span>
        <span style="color: #0000ff;"&gt;if</span> (xhr.readyState === 4<span style="color: #000000;"&gt;) {
            let status </span>=<span style="color: #000000;"&gt; xhr.status
            </span><span style="color: #0000ff;"&gt;if</span> (status >= 200 &amp;&amp; status < 300<span style="color: #000000;"&gt;) {
                let response </span>= ''
                <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 判断接受数据的内容类型</span>
                let type = xhr.getResponseHeader('Content-Type'<span style="color: #000000;"&gt;)
                </span><span style="color: #0000ff;"&gt;if</span> (type.indexOf('xml') !== -1 &amp;&amp;<span style="color: #000000;"&gt; xhr.responseXML) {
                    response </span>=<span style="color: #000000;"&gt; xhr.responseXML
                } </span><span style="color: #0000ff;"&gt;else</span> <span style="color: #0000ff;"&gt;if</span> (type === 'application/json'<span style="color: #000000;"&gt;) {
                    response </span>=<span style="color: #000000;"&gt; JSON.parse(xhr.responseText)
                } </span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt; {
                    response </span>=<span style="color: #000000;"&gt; xhr.responseText
                }
                params.success </span>&amp;&amp;<span style="color: #000000;"&gt; params.success(response)
            } </span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt; {
                params.error </span>&amp;&amp;<span style="color: #000000;"&gt; params.error(status)
            }
        }
    }
    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 如果是get就把参数放在url 否则放在body</span>
    <span style="color: #0000ff;"&gt;if</span> (params.type === 'GET'<span style="color: #000000;"&gt;) {
        xhr.open(params.type,params.url </span>+ '?' + params.data,<span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;)
        xhr.send()
    } </span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt; {
        xhr.open(params.type,params.url,</span><span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;)
        xhr.setRequestHeader(</span>'Content-Type','application/x-www-form-urlencoded; charset=UTF-8'<span style="color: #000000;"&gt;)
        xhr.send(params.data)
    }
}

</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; jsonp(params) {
    let callbackName </span>=<span style="color: #000000;"&gt; params.jsonp
    let head </span>= document.getElementsByTagName('head')[0<span style="color: #000000;"&gt;]
    params.data[</span>'callback'] =<span style="color: #000000;"&gt; callbackName
    let data </span>=<span style="color: #000000;"&gt; formatParams(params.data)
    let script </span>= document.createElement('script'<span style="color: #000000;"&gt;)
    head.appendChild(script)

    window[callbackName] </span>= <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(json) {
        head.removeChild(script)
        clearTimeout(script.timer)
        window[callbackName] </span>= <span style="color: #0000ff;"&gt;null</span><span style="color: #000000;"&gt;
        params.success </span>&amp;&amp;<span style="color: #000000;"&gt; params.success(json)
    }

    script.src </span>= params.url + '?' +<span style="color: #000000;"&gt; data

    </span><span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (params.time) {
        script.timer </span>= setTimeout(() =><span style="color: #000000;"&gt; {
            head.removeChild(script)
            window[callbackName] </span>= <span style="color: #0000ff;"&gt;null</span><span style="color: #000000;"&gt;
            params.error </span>&amp;&amp; params.error({ message: '超时'<span style="color: #000000;"&gt; })
        },params.time)
    }
}

</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; formatParams(data) {
    let arr </span>=<span style="color: #000000;"&gt; []
    </span><span style="color: #0000ff;"&gt;for</span> (let name <span style="color: #0000ff;"&gt;in</span><span style="color: #000000;"&gt; data) {
        arr.push(encodeURIComponent(name) </span>+ '=' +<span style="color: #000000;"&gt; encodeURIComponent(data[name]))
    }
    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 添加一个随机数 防止缓存</span>
    arr.push('v=' +<span style="color: #000000;"&gt; random())
    </span><span style="color: #0000ff;"&gt;return</span> arr.join('&amp;'<span style="color: #000000;"&gt;)
}

</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; random() {
    </span><span style="color: #0000ff;"&gt;return</span> Math.floor(Math.random() * 10000 + 500<span style="color: #000000;"&gt;)
}

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!