最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了。
不说废话,先上一个用ajax请求下本地的一个. txt文件
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; script>
窗口。onload=function () {
var oBtn=. getelementbyid (btn);
oBtn。onclick=function () {//创建XHR对象
var xhr=new XMLHttpRequest ();//请求的方式,地址,是否异步
xhr.open(“得到”、“用法”,真正的);//请求的确定操作,初始化,相当于搜索时,敲击的回车
xhr.send(空);//请求的readyState每变化一次就执行一次onreadystatechange函数//其中判别表示的是:请求/响应过程的当前活动阶段//readyState有如下取的值/*
* 0:未初始化,尚未调用发送()方法
* 1:启动
* 2:发送
* 3:接收
* 4:完成
*/xhr。onreadystatechange=function () {
如果(xhr。readyState==4) {
警报(xhr.responseText);
}
}
};
};
& lt;/script>
& lt;/head>
& lt; body>
& lt;输入类型="按钮" id=" btn " value=" https://www.yisu.com/zixun/show "比;
& lt;/body>
& lt;/html>
执行效果如下,点击显示就会通过ajax请求本地的. txt文件。
代码比较简单,加上注释,相信很容易就看得懂。
但是工作中我们经常会请求其他域下的资源(因为同源策略),这个时候就遇到了跨域(协议,端口,域名任何一个不同就算是跨域)。
解决跨域的一种常用办法就是jsonp,虽然他有局限性(只支持得到请求),不过优点是兼容老式浏览器(不过现在好像很少有人在意老式浏览器了)。
jsonp的基本原理:就是通过动态创建脚本标签,脚本标签的src是没有跨域限制的。
接下来上一个类似百度搜索下拉的页面
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; style>
* {
保证金:0;
填充:0;
}
输入{
宽度:300 px;
高度:30 px;
边界:1 px固体浅灰色;
margin-top: 150 px;
margin-left: 200 px;
padding-left: 5 px;
}
ul {
宽度:307 px;
list-style:没有;
margin-left: 200 px;
显示:没有;
}
李{
高度:30 px;
边界:1 px固体浅灰色;
行高:30 px;
padding-left: 5 px;
}
& lt;/style>
& lt; script>
函数callbackD(响应){
var oUl=. getelementbyid (“ulList”);
var html=";
如果(response.s。长度!=0){
oUl.style.display=翱椤?
我(var=0; i< response.s.length;我+ +){
html +=& lt; li>”+ response.s[我]+ & lt;/li>”
}
}
oUl。innerHTML=html;
}
& lt;/script>
& lt; script>
窗口。onload=function () {//获取dom元素
var oData=https://www.yisu.com/zixun/document.getElementById (“inputSearch”);
var oUl=. getelementbyid (“ulList”);//键盘按下后抬起触发事件(onkeyup)
oData。onkeyup=function () {
如果(oData。价值!=){//创建标签(createElement)
var=document.createElement脚本(脚本);//添加地址
script.src=' http://unionsug.baidu.com/su& # 63; wd=' + this.value +”, p=3, cb=callbackD ';//添加给身体的(成为身体包涵的孩子)
document.body.appendChild(脚本);
其他}{
oUl.style.display='没有';
}
}
};
& lt;/script>
& lt;/head>
& lt; body>
& lt;输入类型="文本" id=癷nputSearch”比;
& lt; ul id=皍lList”比;
& lt; li> 123 & lt;/li>
& lt;/ul>
& lt;/body>
& lt;/html>
执行效果如下:
代码也相对比较简单,加上代码的注释,一定很容易看懂,这就是解决跨域的一种常用办法,其他有反向代理,歌珥啊等等,等我学好再整理出来。
以上这篇原生js的ajax和解决跨域的jsonp(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
