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. 低压差稳压器AMS1585

    (1)高效线性稳压. (2)输出高达4.6A,最高输入电压15V,推荐最低压差1.5V(最低1.35V),最大压差12V. (3)两种封装:TO220(直插式),TO230(贴片). 典型电路如下图所 ...

  2. [IoLanguage]Io Tutorial[转]

    Io Tutorial   Math   Io> 1+1 ==> 2 Io> 2 sin ==> 0.909297 Io> 2 sqrt ==> 1.414214 ...

  3. TortoiseSVN优化设置

    设置log messages的字体 TortoiseSVN默认的字体太小了,看着难受: 可以在Settings > 左侧目录树General > Dialogs 1中进行设置: 使用Bey ...

  4. Bzoj 1696: [Usaco2007 Feb]Building A New Barn新牛舍 中位数,数学

    1696: [Usaco2007 Feb]Building A New Barn新牛舍 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 394  Solve ...

  5. 4G

    4G网络的概念是什么 浏览:5461 | 更新:2013-02-16 15:08 4G是第四代无线传输技术的缩写,它是宽带移动通信阶段,是继3G的标准的另一个阶段.随着Internet及多媒体技术的快 ...

  6. Intellij IDEA 导入Eclipse或MyEclipse的Web项目(旧版 转载)

    Intellij IDEA 导入Eclipse或MyEclipse的Web项目 博客分类: Intellig IDEA Intellij IDEAEclipseWeb  Intellij IDEA 导 ...

  7. Python自带的日志模块logging的使用

    import logging     # 创建一个logger logger = logging.getLogger('cmccLogger') logger.setLevel(logging.DEB ...

  8. winform清空DataGridView中的数据 分类： DataGridView 2014-05-19 20:56 180人阅读 评论(0) 收藏

    我们一般要把dgv情况,一般用: DataTable dt = (DataTable)dgvData.DataSource; dt.Rows.Clear(); dgvData.DataSource = ...

  9. Android中的主题Theme

    系统自带的Theme: android以及为我们定义好了一些theme,需要是我们直接可以拿来使用. 常用的Theme通常如下:  android:theme="@android:style ...

  10. Android关于ListView中item与控件抢夺焦点的那些事

    在开发中,listview可以说是我们使用最频繁的控件之一了,但是关于listview的各种问题也是很多.当我们使用自定义布局的Listview的时候,如果在item的布局文件里面存在Button或者 ...