前端之家收集整理的这篇文章主要介绍了
Ajax API介绍，以及html5的新特性，jsonp的用法，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
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" onclick="test1();"value="测试" />
<input type="text" name="search"/>
<input type="button" value="查询" onclick="searchKeyword();"/><div id="res"></div>
</body>
</html>
