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. 【转】 MEF 和 MAF

    今天在MSDN上看了一下微软这俩个可扩展框架,微软技术高手真很有才! MEF 和 MAF区别: 早期的 .NET Framework 版本引入了 Managed Add-in Framework (M ...

  2. Hibernate（三）Hibernate 配置文件

    在上次的博文Hibernate(二)Hibernate实例我们已经通过一个实例的演示对Hibernate 的基本使用有了一个简单的认识,这里我们在此简单回顾一下Hibernate框架的使用步骤. Hi ...

  3. java---Unicode-字符转换器

    实现一个字符(包括汉字)的简单互相转换: package cn.hncu.gui2; import java.awt.Button; import java.awt.Color; import jav ...

  4. C++引用（Reference）

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

  5. php 中 global 与 $GLOBAL 由引用产生的区别

    很多人都认为global和$GLOBALS[]只是写法上面的差别,其实不然. 根据官方的解释是 $GLOBALS['var'] 是外部的全局变量$var本身. global $var 是外部$var的 ...

  6. oracle 创建表空间、创建用户管理该表空间

    /*分为四步 *//*第1步:创建临时表空间  */create temporary tablespace user_temp  tempfile 'D:\oracle\oradata\Oracle9 ...

  7. MySQL高可用性大杀器之MHA | 火丁笔记

    MySQL高可用性大杀器之MHA | 火丁笔记 MySQL高可用性大杀器之MHA

  8. Google的一些功能和软件

    本博文的主要内容有 .Google的一些功能和软件 Google的一些功能和软件 1.  iGoogle 2.  Google Earth 3.  Google Talk http://www.goo ...

  9. Ubuntu 安装vim出错

    在Ubuntu 12.10中安装vim时出现了如下提示: www.linuxidc.com @linuxidc:/etc/apt$ sudo apt-get install vim正在读取软件包列表. ...

  10. java基础学习(一)

    去年10月份从学校出来实习,从事javaWeb方面的开发.到现在已经快1年了.突然间感觉自己的java基础知识忘记的很厉害,或者说知识掌握的不牢吧.回顾自己学习java,发现我竟然一本关于java基础 ...