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. 窥探Unity5渲染内部之解析UnityShaderVariables.cginc

    unity5的UnityShaderVariables.cginc比unity4大了1kb这里装着unity shader 大部分内部参数,写这个方便以后自己查询 Camera参数 uniform f ...

  2. 【狼】unity3d collision获取碰撞的点的位置

    void OnCollisionEnter(Collision ctl) { ContactPoint contact = ctl.contacts[]; Quaternion rot = Quate ...

  3. C++引用（Reference）

    引用(Reference)是C++语言相对于C语言的又一个扩充,类似于指针,只是在声明的时候用&取代了*.引用可以看做是被引用对象的一个别名,在声明引用时,必须同时对其进行初始化.引用的声明方 ...

  4. mipi 调试经验

    转载自http://blog.csdn.net/g_salamander/article/details/9163455 以下是最近几个月在调试 MIPI DSI / CSI 的一些经验总结,因为协议 ...

  5. [Hibernate] 注解映射例子

    Hibernate 注解(Hibernate Annotation) 是一种比较新的方式,通过在 java 简单类增加注解,来声明 java 类和数据库表的映射,作用和 xml 文件相似.hibern ...

  6. 使用Codis搭建redis集群服务

    转(http://www.jianshu.com/p/f8e968e57863) 一. 应用场景 redis 作为数据结构存储引擎,有着很多优点 高性能单机引擎可以达到5-10W qps 数据结构全面 ...

  7. 用函数生成select选择框

    // 生成 html select option 标签 function build_options($options, $opt='',$k='') { $frags = array(); if ( ...

  8. C# 数组排序 基本算法 分类： C# 2014-09-25 15:43 129人阅读 评论(0) 收藏

    说明:冒泡.直接插入.选择.自带方法四中基本排序算法. using System; using System.Collections.Generic; using System.ComponentMo ...

  9. 【设计模式 - 5】之适配器模式（Adapter）

    1      模式简介 适配器模式解决的问题:让原本因为接口不兼容而不能一起工作的类可以一起工作. 适配器模式的UML原理图如下图所示: 从上图可见,客户想要用Target接口实现Adaptee接口中 ...

  10. MapObject shape数据操作

    利用MO 的GeoDataset  .DataConnection  Recordset 进行数据操作 在MO中.使用GeoDataset对象和DataConnection 对象来连接和读取地理数据. ...