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

来源：互联网发布：mysql导入中文数据乱码编辑：程序博客网时间：2024/06/10 06:33
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>
0 0