最近慢慢感觉，学再多框架，库，都不如老老实实先把基础弄扎实了。
不说废话，先上一个用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(){
//创建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>
</head>
<body>
<input type="button" id="btn" value="show">
</body>
</html>
执行效果如下，点击show就会通过ajax请求本地的.txt文件。
代码比较简单，加上注释，相信很容易就看得懂。
但是工作中我们经常会请求其他域下的资源（因为同源策略），这个时候就遇到了跨域（协议，端口，域名任何一个不同就算是跨域）。
解决跨域的一种常用办法就是jsonp，虽然他有局限性（只支持get请求），不过优点是兼容老式浏览器（不过现在好像很少有人在意老式浏览器了）。
jsonp的基本原理：就是通过动态创建script标签，script标签的src是没有跨域限制的。
接下来上一个类似百度搜索下拉的页面
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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]+'</li>'
}
}
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>
</head>
<body>
<input type="text" id="inputsearch">
<ul id="ullist">
<li>123</li>
</ul>
</body>
</html>
执行效果如下：
代码也相对比较简单，加上代码的注释，一定很容易看懂，这就是解决跨域的一种常用办法，其他有反向代理，cors啊等等，等我学好再整理出来。
以上这篇原生js的ajax和解决跨域的jsonp(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
vue源码实战render.js与$nextTick的异步调用
网友评论