最近慢慢觉得多学习框架和库不如先打牢基础。

别瞎说，先请求当地。带有ajax的txt文件

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script window . onload=function(){ var oBtn=document . getelementbyid(' BTN ')；obtn . onclick=function(){//Create XHR对象var xhr=new XMLHttpRequest()；//请求方式、地址，是否异步xhr.open('get '，' test.txt '，true)；//请求的确认操作初始化，相当于搜索时命中回车xhr . send(null)；onreadyStatechange函数在每次请求的readyState更改时执行。//其中readystate表示请求/响应过程的当前活动阶段。//readyState具有以下值/* * 0:未初始化。尚未调用Send()方法* 1:来开始* 2:发送* 3:接收* 4:完成*/xhr . onreadystatechange=function(){ if(xhr . readystate==4){ alert(xhr . responsetext)；} } };};/script/head dyinput type=' button ' id=' BTN ' value=' show '/body/html执行效果如下。单击显示将请求本地。通过ajax。

代码比较简单，有注释，相信很容易理解。

但是，在工作中，我们经常会向其他域请求资源(因为同源策略的原因)，此时我们会遇到跨域(即使任何协议、端口和域名不同，也是跨域)。

解决跨域问题的常用方法是jsonp。尽管它有局限性(只支持get请求)，但它有与旧浏览器兼容的优势(尽管现在似乎很少有人关心旧浏览器)。

jsonp的基本原理是动态创建脚本标签，脚本标签的src没有跨域限制。

接下来，一个类似百度搜索的页面下拉

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style * { margin : 0；padd : 0；}输入{ width:300px高度：30 px；border:1px实心浅灰色；边距-top : 150 px；边距-left : 200 px；左衬垫left: 5px} ul { width:307pxlist-style:无；边距-left : 200 px；display:无；} li { height:30pxborder: 1px实心浅灰色；线高： 30px；左衬垫left: 5px} /style脚本函数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]'/Li ' } } OUl . innerHTMl=html；}/script script window . onload=function(){//get DOM元素varo data=document . getelementbyid(' input search ')；var OUl=document . getelementbyid(' ulList ')；//触发事件(onkeyup) odata。onkeyup=function () {if (odata。价值！=' '){//创建标记(create element)var script=document。create element(' script ')；//添加地址脚本. src=' http://unionsug.baidu.com/su? wd=' this . value ' p=3cb=callbackD '；//添加到正文的(成为正文覆盖的子级)document.body.appendchild(脚本)；} else { OUl . style . display=' none '；} } };/script/head dyinput type=' text ' id=' input search ' ul id=' ul list ' Li 123/Li/ul/body/html执行效果如下：

代码相对简单，加上代码的注释，一定很容易理解。这是解决跨域的常用方法。其他包括反向代理、CORS等。学好了我再整理。

以上原生js的ajax和解决跨域问题的jsonp都是边肖分享的内容。希望能给大家一个参考，支持我们。