js Ajax和Json 以及JSONP

最新推荐文章于 2024-04-16 11:39:26 发布

原创最新推荐文章于 2024-04-16 11:39:26 发布 · 640 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js Ajax Json JSONP

前端专栏收录该内容

11 篇文章

订阅专栏

本文深入讲解Ajax技术原理，包括局部刷新、异步通信及其实现步骤。同时，介绍了JSON数据格式，探讨其与XML的区别，以及在Ajax中的应用。此外，还介绍了JSONP解决跨域问题的方法。

Ajax和Json 以及JSONP

文章目录

Ajax和Json 以及JSONP

基本介绍

AJAX 全称：
Asynchronous JavaScript and XML(异步的JavaScript和 XML)。
局部刷新技术：
解决页面全部刷新的效率低低的问题
Ajax 核心对象：
xmlHttpReaquest
Ajax 执行的原理：
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax实现了与服务器的异步通信、局部刷新页面，这就是Ajax技术的核心所在。

Ajax 接收的数据类型为：
字符串
XML对象

1：什么是Ajax

当万维网开始时,网页只包含静态内容。客户端和服务器之间传输数据都是通过form表单。在web应用程序中,客户端通过表单提交自己输入的信息,服务器端的程序接受到客户提交的表单后,根据表单的数据内容进行处理,然后把处理结果返回给用户,这样就完成了一个简单的交互。
但是这种传输方式有一个很大的缺陷,就是每次用户与服务器的交互都需要重新刷新整个页面。然而在那个网速不佳的年代。重新刷新页面的成本时很高的,通常会导致在加载页面时屏幕变空白
1999年,微软公司在Internet Explorer 5中实现了XMLHttp ActiveX 控件。它最初是为outlook Web客户端开发的,允许在后台使用JavaScript异步发送数据。随后其他浏览器也实现了这种技术,不过它仍然时一个相对未知的功能，很少使用
Ajax这个术语是由jesse james Garrentt 于2005年 "在Ajax ：一种新的Web应用程序方法 "一文中所创造的,他提到了Google在最近的Web应用程序中使用的技术,Ajax是一个简介的首写字母缩写词，指的是该技术在使用的过程中所涉及到的不同部分,全程：Asynchronous JavaScript and XML。
Asynchronous：
翻译成中文是异步的意思,当发送数据请求时,程序不必停下来等待响应。它可以继续运行,等待响应收到时触发事件。通过使用回调来管理这种过程,程序能够以有效的方式运行,避免了数据来回传输带来的延迟。
JavaScript：
利用JavaScript我们可以接受来自服务器端返回的数据,并将这些数据实时的更新到页面。
XML：
最开始术语Ajax被创造时,经常用XML文档来返回数据。但是实际上可以发送许多不同类型的数据。到目前为止,在Ajax中最常用的是JSON,它比XML更轻量且更易于解析。JSON还具备被JavaScript原生支持的优点,所以我们可以处理JavaScript对象,而不必使用DOM方法来解析XML文件

优点：

页面无刷新,在页面内与服务器通信,减少用户等待的时间,增强了用户体验。
使用异步方式与服务器通信,响应速度快
可以把一些原本服务器的工作转到客户端,利用客户端闲置的能力来处理，减轻了服务器和宽带的负担,节约空间和宽带租用成本。
基于标准化的并广泛支持的技术,不需要下载插件或者小程序。

缺点

无法进行操作的后退。
对搜索引擎的支持比较弱
可能会影响程序中的异常处理机制
安全问题。对一些网站的攻击如CSRF ,XXS ,SQL 注入等不能很好的防御。

2：Ajax实现原理

使用原生的Ajax大致包括以下几个步骤：

1：创建XMLHttpRequest对象(核心对象) 由于IE6以下的兼容性问题
2：发出HTTP请求
3：接收服务器传回的数据
4：更新网页数据

概括起来,就是Ajax通过原生的XMLHttpRequest对象发出HTTP请求,得到服务器返回的数据后,再进行处理。

/**
原生态的实现Ajax代码
第一步把Ajax发送请求的对象实例化
**/

var httpRequest;
  if(document.all){
   httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
  }else{
    httpRequest=new XMLHttpRequest();
  }
/**
    第二步 使用xmlHttpRequest 规定请求的类型 
    再调用 httpRequest.send()方法发送请求
**/
  httpRequest.open("请求的方式","请求的servlet",true)
/**
参数说明：
method：发送请求的方式。取值有GET和POST（不区分大小写，建议使用大写）
url：请求资源的位置路径
async：控制是否异步处理请求。取值有true（异步）和false（同步），默认为true
**/
  //获取服务器端返回的数据
httpRequest.onreadtsyayechange=function(){
  //表示响应成功
  if(httpRequest.readatState==4 && httpRequest.status==200){
  //获得服务器返回的数据
  var msg=httpRequest.responseText;
  //把服务器返回的json格式的字符串转换为 json对象 以方便取数据
  var student=window.eval("(+msg+)");
 $("#show").html("编号:"+student.id+"姓名:"+student.name);    
  }
}
<!--Jquery 框架的用法-->
<!-- 待页面加载完毕执行以下函数 -->
$(function(){
  $.ajax({ 
  method:"post", <!--自动提交的方式-->
  url:"test", <!--url地址-->
  dataType:"json",<!--把服务器返回的json格式的字符串转为json对象-->
  data: {"username":$("#username").val()},
        {"pwd":$("#pwd").val()})}<!-- 传递给后台的数据 -->
        
    success:function(data){
    <!--需要渲染到某个标签-->
    $("#show").html("编号:"+data.id+"姓名:"+data.name);
    }
    /**
    jquery 的三种简写方式
    1：简写
    2：uri地址
    3：回调函数：当数据从服务器返回来，再回过头来调用该函数
    回调函数中的参数就是服务器返回的数据
    4：返回数据的类型 text json jsonp
    采用键值对的方式将参数返回到服务器
    **/
    $.get("test",
    {"username":$("#username").val()},
    {"pwd":$("#pwd").val()})
   })
})

ajax：同源策略

同协议+同域名+同端口

jsonp

全称：JSON with padding (填充式JSON或参数式JSON的简写)
为了解决Ajax跨域问题
跨域：到别的服务器请求内容

//使用jQuery 发送 jsonp 进行跨域取值
   $.ajxa({
   type:"post",
   url:"http://127.0.0.1:8080/web_two/two",
   dataType:"jsonp",
  })

Json

全称：
JavaScript对象表示发(JavaScript Object Notation)

JSON 是存储和交换文本信息的语法类似XML
JSON比XML更小、更快、更易解析

简单理解：
一种数据交换格式
json 语法：
{} 采用键值对的方式进行存储有多个属性用逗号隔开
将对象直接转换为一个json格式的字符串工具
Jackson,gson,fastJson把对象转换为一个json格式的字符串
gson Google公司把对象转换为一个json格式的字符串的一个工具

<!-- 
json对象
{ } 花括号表示一个对象
取数据： 对象名.属性名  使用 点 操作符  简单对象
对象中嵌套对象{属性:值,嵌套对象的名字:{}}
-->
var person= {id:1,name:'小夏',age:20,dog:{id:10,name:'大黄'}};
<!-- 多个对象 -->
var person= {id:1,name:'小夏',age:20,
            dogs:[{id:10,name:'老大'},
            {id:11,name:'老二'},
            {id:12,name:'老幺'}]};

Mock.js介绍

1.特点

生成随机数据拦截Ajax请求

2.使用

1.生成随机数据

Mock.mock( templete )

数据模板中的每个属性由3个部分构成：属性名 name 生成规则rule 属性值value

"name|rule": value

说明：

属性名和生成规则之间用竖线分隔
生成规则是可选的

const data = Mock.mock({    
// 随机生成一个包含4个对象的数组  
'list|4': [{       
 // 对象的id属性名依次加1    
 'id|+1': 1,        
 // 随机产生一个中文的姓名      
  "name": '@cname()',          
  // 随机生成一个地址     
  addr: '@county(true)',        
   //随机生成一个数字大小在18到30
        'age|18-30': 1,         
        // 随机生成一个日期     
        birth: '@date()',         
        // 随机生成一个整数，0/1，根据这个来给“男”“女”      
        gender: '@integer(0, 1)',        
        //随机生成一个邮箱   
        email: '@EMAIL()',         
        // 在数组中随机找一个       
        'like|1':['看书,'运动','听音乐'],      
        //1-100随机生成一个保留两位小数      
         'score|1-100.2':1,         
         // 随机生成一个日期  
          time: "@date('yyyy-MM-dd')",        
          // 用正则匹配1开头的11位数字的手机号     
          mobile: /^1[3-9]\d{9}$/     
          }] 
          }) 
          console.log( data );

2.拦截Ajax请求

Mock.mock( rurl, templete )

rurl表示需要拦截的URL。当拦截到匹配rurl的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。

$.ajax({    
url: "/getStudent",    
type: "GET",    
success(msg){        
console.log( JSON.parse(msg) 
);   
 }
})
 Mock.mock(/getStudent/,{    
// 随机生成一个包含4个对象的数组  
'list|4': [{       
 // 对象的id属性名依次加1    
 'id|+1': 1,        
 // 随机产生一个中文的姓名      
  "name": '@cname()',          
  // 随机生成一个地址     
  addr: '@county(true)',        
   //随机生成一个数字大小在18到30
'age|18-30': 1,         
 // 随机生成一个日期     
 birth: '@date()',         
 // 随机生成一个整数，0/1，根据这个来给“男”“女”      
 gender: '@integer(0, 1)',        
 //随机生成一个邮箱   
 email: '@EMAIL()',         
 // 在数组中随机找一个       
'like|1':['看书,'运动','听音乐'],      
//1-100随机生成一个保留两位小数      
'score|1-100.2':1,         
// 随机生成一个日期  
time: "@date('yyyy-MM-dd')",        
// 用正则匹配1开头的11位数字的手机号     
mobile: /^1[3-9]\d{9}$/     
}] 
})