大家好,又见面了,我是你们的朋友全栈君。
Ajax=异步Javascript+XML; ajax是一种数据请求的方式,不需要刷新整个页面。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 ajax的核心技术当然是XMLHttpRequest对象; ajax请求过程:创建XMLHttpRequest对象、连接服务器、发送请求、接受相响应数据。
<script type="text/javascript"> //调用ajax函数 ajax({
url:'./TestXHR.aspx', type:'POST', dataType:'json', data:{
name:"马各马它",age:18}, success:function(response,xml){
//请求成功后执行的代码 }, error:function(status){
//失败后执行的代码 } }); //创建ajax函数 function ajax(options){
options=options||{
}; optoins.type=(options.type||'GET').toUpperCase(); options.dataType=options.dataType||'json'; params=formatParams(options.data); //创建-第一步 var xhr; //非IE6 if(window.XMLHttpRequest){
xhr=new XMLHttpRequest(); }else{
//ie6及其以下版本浏览器 xhr=ActiveXObject('Microsoft.XMLHTTP'); } //接收-第三步 xhr.onreadystatechange=function(){
if(xhr.readyState==4){
var status=xhr.status; if(status>=200&&status<300){
options.success&&options.success(xhr.responseText,xhr.responseXML); }else{
options.error&&options.error(status); } } } //连接和发送-第二步 if(options.type=='GET'){
xhr.open('GET',options.url+'?'+params,true); xhr.send(null); }else if(options.type=='POST'){
xhr.open('POST',options.url,true); //设置表单提交时的内容类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } } //格式化参数 function formatParams(data){
var arr=[]; for(var name in data){
arr.push(encodeURIComponent(name)+'='+encodeURIComponent(data[name])); } arr.push(('v='Math.random()).replace('.','')); return arr.join('&'); } </script>
JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点,由其 src 属性发送请求到服务器,服务器返回 js 代码,网页端接受响应,然后就直接执行了,这和通过 script 标签引用外部文件的原理是一样的。
JSONP由两部分组成:回调函数和数据,回调函数一般是由网页端控制,作为参数发往服务器端,服务器端把要返回的数据拼成字符串作为函数的参数传入。
比如网页端创建一个 script 标签,并给其 src 赋值为 http://www.example.com/json/?callback=process
, 此时网页端就发起一个请求。服务端将要返回的数据拼好最为函数的参数传入,服务端返回的数据格式类似”process({‘name’:’example’})”,网页端接收到了响应值,因为请求者是 script,所以相当于直接调用 process 方法,并且传入了一个参数。
单看响应返回的数据,JSONP 比 ajax 方式就多了一个回调函数。
function jsonp(options) {
options = options || {};
if (!options.url || !options.callback) {
throw new Error("参数不合法");
}
//创建 script 标签并加入到页面中
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
options.data[options.callback] = callbackName;
var params = formatParams(options.data);
var oS = document.createElement('script');
oHead.appendChild(oS);
//创建jsonp回调函数
window[callbackName] = function (json) {
oHead.removeChild(oS);
clearTimeout(oS.timer);
window[callbackName] = null;
options.success && options.success(json);
};
//发送请求
oS.src = options.url + '?' + params;
//超时处理
if (options.time) {
oS.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oS);
options.fail && options.fail({ message: "超时" });
}, time);
}
};
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
1、因为 script 标签的 src 属性只在第一次设置的时候起作用,导致 script 标签没法重用,所以每次完成操作之后要移除; 2、JSONP这种请求方式中,参数依旧需要编码; 3、如果不设置超时,就无法得知此次请求是成功还是失败;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>为 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script> var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}'; obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url; </script>
</body>
</html>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/106667.html原文链接:https://javaforall.cn