這次帶給大家ajax與跨域jsonp,ajax與跨域jsonp的注意事項有哪些,下面就是實戰案例,一起來看一下。
nbsp;html> <meta> <title>Title</title> <script> window.onload =function(){ var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ //创建XHR对象 var xhr = new XMLHttpRequest(); //请求的方式,地址,是否异步 xhr.open('get','test.txt',true); //请求的确定操作,初始化,相当于搜索时,敲击的回车 xhr.send(null); //请求的readyState每变化一次就执行一次onreadystatechange函数 //其中readyState表示的是:请求/响应过程的当前活动阶段 //readyState有如下取值 /* * 0:未初始化,尚未调用send()方法 * 1: 启动 * 2:发送 * 3:接收 * 4:完成 */ xhr.onreadystatechange =function(){ if(xhr.readyState ==4){ alert(xhr.responseText); } } }; }; </script> <input>
執行效果如下,點選show就會透過ajax請求本地的.txt檔案。
# 程式碼比較簡單,加上註釋,相信很容易就看得懂。
但是工作中我們經常會請求其他域下的資源(因為同源策略),這個時候就遇到了跨域(協議,端口,域名任何一個不同就算是跨域)。
解決跨域的常用方法就是jsonp,雖然他有限制(只支援get請求),不過優點是相容老式瀏覽器(不過現在好像很少人在乎老式瀏覽器了)。
jsonp的基本原理:就是透過動態創造script標籤,script標籤的src是沒有跨域限制的。
接下來上一個類似百度搜尋下拉的頁面
nbsp;html> <meta> <title>Title</title> <style> *{ margin: 0; padding: 0; } input{ width:300px; height:30px; border:1px solid lightgray; margin-top: 150px; margin-left: 200px; padding-left: 5px; } ul{ width:307px; list-style: none; margin-left: 200px; display: none; } li{ height:30px; border: 1px solid lightgray; line-height: 30px; padding-left: 5px; } </style> <script> function callbackD(response){ var oUl = document.getElementById('ulList'); var html=''; if(response.s.length !=0){ oUl.style.display='block'; for(var i = 0;i<response.s.length;i++){ html+='<li>'+response.s[i]+'' } } oUl.innerHTML = html; } </script> <script> window.onload = function(){ //获取dom元素 var oData = document.getElementById('inputSearch'); var oUl = document.getElementById('ulList'); //键盘按下后抬起触发事件(onkeyup) oData.onkeyup = function(){ if(oData.value != ''){ //创建标签(createElement) var script = document.createElement("script"); //添加地址 script.src='http://unionsug.baidu.com/su?wd='+this.value+'&p=3&cb=callbackD'; //添加给body的(成为body包涵的孩子) document.body.appendChild(script); }else{ oUl.style.display='none'; } } }; </script> <input>
程式碼也相對比較簡單,加上程式碼的註釋,一定很容易看懂,這就是解決跨域的一種常用辦法,x其他有反向代理,CORS啊等等,等我學好再整理出來。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是ajax與跨域jsonp的詳細內容。更多資訊請關注PHP中文網其他相關文章!