Ajax API介绍，以及html5的新特性，jsonp的用法

最新推荐文章于 2020-07-26 15:05:55 发布

小陈22

最新推荐文章于 2020-07-26 15:05:55 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/u011691759/article/details/17738181

版权

jsonp其实是与ajax无任何关系。它就是利用第三方API,无刷新得到数据。它也没有用到XHR对象，它是利用js加载的特性，加载一个资源路径。再用回调函数处理即可,它的跨域问题是相对于ajax来说的，
ajax是有限制的。下面一个小实例就是用google api 做了一个查询功能
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function createXHR(){
	var xhr;
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else if(window.ActiveXObject){
		xhr=new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xhr;
}
var xhr=createXHR();
function register(){
	xhr.open('POST',"vote.php",true);
	xhr.setRequestHeader("Content-Type:application/x-www-form-urlencoded");
	//xhr.setHeader("Content-Type:application/x-www-form-urlencoded"); 两个方法都可以
	xhr.onreadystatechange=function(){
		//this.readyState=0 时刚创建，1时打开open 2时成功接收hader 3 成功接收主体 4 断开连接 之后
		if(this.readyState==4&&this.status==200){
			alert(this.reponseText);
			alert(this.rsponseXML);
			alert(this.getResponseHeader("Content-type"));
			alert(this.getResponseHeader("Content-length"));
		}
	}
	//var fd=new FormData('form对象');html5新特性  fd.append('username','zhangshan');追加数据
	var name=document.getElementByName('name')[0];
	var email=document.getElementByName('email')[0];

	xhr.send("name="+name+"&email"+email);
}

//用第三方接口 google 查询跨域请求。jsonp 与ajax无关
function searchKeyword(){
	var sea=document.getElementsByName('search')[0].value;
	var url='http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q='+sea+'&callback=returnResponse';
	var scr=document.createElement('script');
	scr.setAttribute('src',url);
	document.getElementsByTagName('head')[0].appendChild(scr);
}

function returnResponse(res){
	var data=res.responseData.results;
	var str='';
	for(var i in data){
		str+=data[i].title+'<br/>';
		str+=data[i].url+'<br/>';
		str+=data[i].content+'<br/>';
	}
	alert(str)
	document.getElementById('res').innerHTML=str;
}
</script>
</head>
<body>
<form action="vote.php" method="post">
<input type="text" name="name" />
<input type="text" name="email"/>
<input type="submit"/>
</form>
<div id="abc"></div>
<input type="button"  οnclick="test1();"value="测试" />
<input type="text" name="search"/>

<input type="button" value="查询" οnclick="searchKeyword();"/><div id="res"></div>
</body>
</html>

小陈22

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax API介绍，以及html5的新特性，jsonp的用法

jsonp其实是与ajax无任何关系。它就是利用第三方API,无刷新得到数据。它也没有用到XHR对象，它是利用js加载的特性，加载一个资源路径。再用回调函数处理即可,它的跨域问题是相对于ajax来说的，ajax是有限制的。下面一个小实例就是用google api 做了一个查询功能Insert title herefunction createXHR(){ var xhr;
复制链接

扫一扫