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 原理 以及对数据的处理的更多相关文章

  1. Ajax & JSONP 原理

    Ajax & JSONP 原理 AJAX不是JavaScript的规范,它只是一个哥们"发明"的缩写:Asynchronous JavaScript and XML,意思就 ...

  2. jQuery-1.9.1源码分析系列（十六）ajax——jsonp原理

    json jsonp 类型 "json":  把响应的结果当作 JSON 执行,并返回一个JavaScript对象.如果指定的是json,响应结果作为一个对象,在传递给成功处理函数 ...

  3. jQuery源码分析系列(35) : Ajax - jsonp的实现与原理

    ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本 json核心就是:允许用户传递一个callba ...

  4. Ajax跨域：Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  5. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  6. ajax工作原理及jsonp跨域详解

    一.Ajax简介 ajax = 异步 JavaScript 和 XML. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.我们知道,传统的网页(不使用ajax)如果需要更新内容, ...

  7. ajax工作原理，Jsonp原理

    Ajax工作原理是 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...

  8. AJAX JSONP源码实现（原理解析）

    关于JSONP以及跨域问题,请自行搜索. 本文重点给出AJAX JSONP的模拟实现代码,代码中JSONP的基本原理也一目了然. <html xmlns="http://www.w3. ...

  9. jsonp跨域获取数据小解

    jsonp跨域获取数据小解 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访 ...

随机推荐

  1. java基础（十三）常用类总结（三）

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  2. windows调用ubuntu下的sublimeText2环境搭建

    部署需求: windows: windows 7 32 sp1 32位: linux :ubuntu 12.04 LTS 64位: 环境: windows安装:xmanager 4 linux安装:g ...

  3. poj 1258 Agri-Net【最小生成树（prime算法）】

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 44827   Accepted: 18351 Descri ...

  4. linux —— 学习笔记（用户管理与权限控制）

    目录:1.用户的创建和管理    2.组的创建和管理 3.文件执行权限的控制 4.不用密码执行sudo 1.用户的创建和管理 用户的创建和管理: useradd.usermod . userdel . ...

  5. SQL profile纵览(10g)

    第一篇:介绍         10g开始,查询优化器(Query optimizer)扩展成自动调整优化器(Automatic Tuning Optimizer).也就是扩展了功能.此时,我们就可以让 ...

  6. MST(Kruskal’s Minimum Spanning Tree Algorithm)

    You may refer to the main idea of MST in graph theory. http://en.wikipedia.org/wiki/Minimum_spanning ...

  7. 再回首，Java温故知新（九）：Java基础之流程控制语句

    流程控制语句分为条件语句.循环语句和中断语句. 中断语句包括break和continue,两者的区别在于break会跳出整个循环,而continue则是跳出此次循环,之后还会继续下一次循环. 条件语句 ...

  8. block没那么难（三）：block和对象的内存管理

    本系列博文总结自<Pro Multithreading and Memory Management for iOS and OS X with ARC> 在上一篇文章中,我们讲了很多关于 ...

  9. Change Fragment layout on orientation change

    Warning: this may be a pre-Lollipop answer. A Fragment doesn't get re-inflated on configuration chan ...

  10. Java源码中的发现：快速判断一个int值是几位数

    判断一个int值是几位数,要是我自己实现,估计又会想到除法和模运算了,偶然在java标准API源码中发现的写法,很强大. public class Test { final static int[] ...