ajax jsonp 原理 以及对数据的处理
ajax请求
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { && xmlhttp.status==) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/ajax/test1.txt",true); xmlhttp.send();
jsonp请求原理
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <script> function fn(data){ alert(data) }; </script> <script src="data.js"></script> </body> </html>
data.js 的内容是 fn([1,2,3,4,5])
输出结果:
实例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="jquery1.8.3.min.js"></script> </head> <body> <dl id="Dl1"> </dl> <script> function fn(data) { var oDl1 = $('#Dl1'); var html = ''; $.each(data,function(index,content){ $.each(content,function(i,c){ html += '<dt>'+c['title']+'</dt>'; html += '<dd>'+c['summary']+'</dd>'; }) }) oDl1.html(html) }; var oScript = document.createElement('script'); oScript.src = 'https://api.douban.com/v2/book/search?q=javascript&count=10&callback=fn'; document.body.appendChild(oScript); document.body.removeChild(oScript); </script> </body> </html>
百度输入框实例:http://457375608.github.io/liujin/jsonp/百度输入框.html
豆瓣搜索框实例:http://457375608.github.io/liujin/jsonp/豆瓣输入框.html
处理数据:
//遍历数组 第一个参数是索引 第二个是内容
$.each( [0,1,2], function(i, n){
console.log( "索引:" + i + " 内容: " + n );
});
//遍历对象 第一个参数是key 第二个参数value
$.each( {name:"liujin","age":"24","sex":"boy"}, function(i, n){
console.log( "key:"+ i + " value: " + n );
});
//实例一 $(function(){ var data={ "HTML":["html 1","html 2","html 3"] , "CSS":["css 1","css 2","css 3"] , "JAVASCRIPT":["javascript 1","javascript 2","javascript 3"] }; document.write("<dl>") $.each(data,function(index,content){ document.write("<dt>"+index+"</dt>") $.each(content,function(i,c){ document.write("<dd>"+c+"</dd>") }) }) document.write("</dl>") }) //实例二 var data=[{ 小学生:[ {name:'小学生一 ',sex:'boy ',age:24}, {name:'小学生二 ',sex:'boy ',age:24}, {name:'小学生三 ',sex:'boy ',age:24} ] }, { 中学生:[ {name:'中学生一 ',sex:'girl ',age:24}, {name:'中学生二 ',sex:'girl ',age:24}, {name:'中学生三 ',sex:'girl ',age:24} ] }, { 大学生:[ {name:'大学生一 ',sex:'boy ',age:24}, {name:'大学生二 ',sex:'boy ',age:24}, {name:'大学生三 ',sex:'boy ',age:24} ] }]; //jQuery实现 $.each(data,function(index,con1){ $.each(con1,function(index,con2){ document.write(index+"<br>"); $.each(con2,function(index,con3){ document.write(con3.name+" "+con3.sex+" "+con3.age+"<br>") }) }) }) //js实现 for...in遍历对象 for遍历数组 for(var i=0;i<data.length;i++){ //遍历年级所在对象(数组) for(var x in data[i]){ //输出对象属性名(对象) document.write(x+"<br>"); for(var a=0;a<data[i][x].length;a++){ //遍历对象属性值(数组) document.write(data[i][x][a].name+""+data[i][x][a].sex+""+data[i][x][a].age+"<br>") } } } //$("").load(url,data,function(response,status,xhr)) $("#result").load("ajax/test.html"); //加载整个页面 $("#result").load("ajax/test.html #container"); //加载页面的一部分 $("#result").load("ajax/test.html", function() { //回调函数 alert("Load was performed."); }); //$.get(URL,function(数据,状态){}); //等价于 $.ajax({ type:GET, url: url, success: function(data,status){ } }); //$.post(url,data,function(数据,状态){}) //等价于 $.ajax({ type: 'POST', url: url, data: {key1:value1,key2:value2}, success:function(data,status){ } }); $.ajax({ url:"", //string 请求地址 type:"", //string 请求方式(post/get) timeout:"", //number 超时时间(毫秒) data:"", //json 发送数据 {key:valut,key:value} dataType:"", //string xml,html,script,json,text beforeSent:"", //function 请求之前 function(XMLHttpRequest) complete:"", //function 请求完成 function(XMLHttpRequest,textStatus) seccess:"", //function 请求成功 function(data,textStatus) error:"" //function 请求失败 function(XMLHttpRequest,textStatus,errorThrown) }); //实例 $.ajax({ type: "GET", url: "test.json", dataType: "json", success : function(data){ $('#resText').empty(); var html = ''; $.each( data , function(Index, comment) { //处理json html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html); } });
name:小学生一 sex:boy age:24 name:小学生二 sex:boy age:24 name:小学生三 sex:boy age:24 name:中学生一 sex:girl age:24 name:中学生二 sex:girl age:24 name:中学生三 sex:girl age:24 name:大学生一 sex:boy age:24 name:大学生二 sex:boy age:24 name:大学生三 sex:boy age:24
$.each(data,function(i,n){ $.each(n,function(k,v){ $.each(v,function(i,n){ $.each(n,function(a,b){ document.write(a+':'+b) }) document.write('<br>') }) }) })
ajax jsonp 原理 以及对数据的处理的更多相关文章
- Ajax & JSONP 原理
Ajax & JSONP 原理 AJAX不是JavaScript的规范,它只是一个哥们"发明"的缩写:Asynchronous JavaScript and XML,意思就 ...
- jQuery-1.9.1源码分析系列(十六)ajax——jsonp原理
json jsonp 类型 "json": 把响应的结果当作 JSON 执行,并返回一个JavaScript对象.如果指定的是json,响应结果作为一个对象,在传递给成功处理函数 ...
- jQuery源码分析系列(35) : Ajax - jsonp的实现与原理
ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本 json核心就是:允许用户传递一个callba ...
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- ajax工作原理及jsonp跨域详解
一.Ajax简介 ajax = 异步 JavaScript 和 XML. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.我们知道,传统的网页(不使用ajax)如果需要更新内容, ...
- ajax工作原理,Jsonp原理
Ajax工作原理是 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...
- AJAX JSONP源码实现(原理解析)
关于JSONP以及跨域问题,请自行搜索. 本文重点给出AJAX JSONP的模拟实现代码,代码中JSONP的基本原理也一目了然. <html xmlns="http://www.w3. ...
- jsonp跨域获取数据小解
jsonp跨域获取数据小解 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访 ...
随机推荐
- Sorting Algorithm
sorting 应该是最容易被考到的东西,自己老是学了背,背了忘.为了方便复习,这里进行总结 1. Bubble Sort 定义:每两个两个比较,每扫完一次,当前扫过的最大值放在了末尾. for i ...
- OFFSET & FETCH
OFFSET & FECTH 关键字与ORDER BY结合使用,实现对查询结果的分页 一.单独使用OFFSET: 示例:查询所有职员的信息,按雇佣日期排序并跳过前285条记录(共290条) U ...
- MySQL5.5 所支持的存储引擎
本博文的主要内容有 .存储引擎的概念 .MySQL5.5 所支持的存储引擎 .操作默认存储引擎 .选择存储引擎 与其他的数据库软件不同,MySQL数据库软件提供了一个名为存储引擎的概念,由于存储引擎是 ...
- 【转】VS2013编译libjpeg库
原文地址:http://blog.csdn.net/weixinhum/article/details/42718959 现在,很多图像处理工具和开源库都给出了图像解码的函数接口,然而有时这些接口并不 ...
- Spring IOC配置与应用
1. FAQ:不给提示: a) window – preferences – myeclipse – xml – xml catalog b) User Specified E ...
- linux上安装rar解压软件
描述:Linux默认自带ZIP压缩,最大支持4GB压缩,RAR的压缩比大于4GB. -------------------------------------------------- 下载 # wg ...
- bzoj2657: [Zjoi2012]旅游(journey)
求树的直径 真是太神辣 #include<cstdio> #include<cstring> #include<cstdlib> #include<algor ...
- UVa12063 Zeros and Ones
神坑 1竟然还要取模 在后面填数多好的 #include<cstdio> #include<cstring> #include<cstdlib> #include& ...
- Linq to Object实现分页获取数据
最后调用的CSharp代码可以是: int totalcount = dboperator.Customers.Count(); //总记录数 int pagesize = 100;//每页显示数 / ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单 系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四 ...