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. [转]让程序在崩溃时体面的退出之SEH+Dump文件

    原文地址:http://blog.csdn.net/starlee/article/details/6649605 在我上篇文章<让程序在崩溃时体面的退出之SEH>中讲解了SEH中try/ ...

  2. asp json

    <script language="JScript" runat="Server">function toObject(json) {    eva ...

  3. 没有找到 mspdb100.dll 的解决办法

    直接从Common7\IDE\下复制这个文件到VC\Bin\下即可解决.(D:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE)

  4. mysql定时器三部曲

    1.查看事件状态 SELECT @@event_scheduler;  或    show VARIABLES LIKE '%sche%'; 2.创建存储过程 示例一批量新增: delimiter | ...

  5. WPF的进度条progressbar，运行时间elapse time和等待spinner的实现

    今天用.NET 4.5中的TPL的特性做了个小例子,实现了WPF的进度条progressbar,运行时间elapse time和等待spinner. 先上图吧.   这个例子包含4个实现,分别是同步版 ...

  6. CSS3动画变形transition

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Linq to XML 读取XML 备忘笔记

    本文转载:http://www.cnblogs.com/infozero/archive/2010/07/13/1776383.html Linq to XML 读取XML 备忘笔记 最近一个项目中有 ...

  8. hdoj 3157 Crazy Circuits 【有下界最小流】

    题目:hdoj 3157 Crazy Circuits 题意:如今要制造一个电路板.电路板上有 n 个电子元件,各个元件之间有单向的电流流向.然后有一个 + .电流进入, -- 电流汇入,然后推断能不 ...

  9. Handler具体解释系列(四)——利用Handler在主线程与子线程之间互发消息

    MainActivity例如以下: package cc.c; import android.app.Activity; import android.os.Bundle; import androi ...

  10. good page

    http://www.cnblogs.com/zrtqsk/category/540486.html