来自 Web前端 2020-01-18 01:08 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

网上澳门金莎娱乐Js中的数据传输形式JSON和AJAX技术

时间: 2019-08-19阅读: 173标签: 数据

1.AJAX
    [1] AJAX简介
        > 全称: Asynchronous JavaScript And XML
        > 异步的JavaScript和XML
        
        > AJAX就是通过JavaScript向服务器发送请求,并接收服务器给出的响应(XML格式),然后我们在通过DOM来修改页面。
        > XML指的是服务器响应的数据的格式。
        > 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。现在常用JSON作为响应的格式。
        
    [2] 同步和异步
        >  同步:
            当我们通过浏览器向服务器发送一个请求时,浏览器会刷新整个页面。
        > 异步:
            当我们向服务器发送请求时,不是刷新整个网页,而是只刷新网页的一部分。
    
    [3] XMLHttpRequest对象
        > 我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
        > 在XMLHttpRequest对象中封装发送给服务器请求报文,同时在服务器发回响应时,响应信息也会在对象中封装。
        > 如何获取XMLHttpRequest对象
            - var xhr = new XMLHttpRequest();
    
    [4] 使用步骤

今天为大家讲解JavaScript中的数据传输形式JSON和AJAX技术。同时,这也是JavaScript系列的最后一篇。

    1).创建XMLHttpRequest对象
      2).给open方法设置请求参数[method,url]
        3).发送请求(send()方法)
        4).需要使用onreadystatechange回调函数监听readyState这个属性状态变化!

一 、JSON

  具体说明:
        1.创建XMLHttpRequest对象
            大部分比较新的浏览器都支持的方式(IE7以上)
                var xhr = new XMLHttpRequest();
            IE6以下的
                var xhr = new ActiveXObject("Msxml2.XMLHTTP");
            IE5.5以下的
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");
                
            通用的获取XMLHttpRequest对象的方法:
            
            //写一个获取XHR的方法
            function getXMLHttpRequest(){
                try{
                    //大部分浏览器都支持的方式
                    return new XMLHttpRequest();
                }catch(e){
                    try{
                        //IE6以下浏览器支持的方式
                        return new ActiveXObject("Msxml2.XMLHTTP");
                    }catch(e){
                        try{
                            //IE5以下的浏览器
                            return new ActiveXObject("Microsoft.XMLHTTP");
                        }catch(e){
                            alert("你是火星来的吧!你的浏览器不支持AJAX!");
                        }
                        
                    }
                    
                }
            }
           
        2.设置请求信息(请求地址,请求方式,请求参数)
            xhr.open(请求方式,请求地址);
            在发送post请求时,还需要设置一个请求头,如下:
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        
        3.发送请求
            xhr.send(请求体);
            get请求没有请求体,所以send中可以传null或什么都不传。
            post请求需要通过send来设置请求参数。
            xhr.send("username=zhangsan&password=lisi");
        
        4.接收响应信息
            //xhr绑定一个onreadystatechange响应函数,这个函数会在readyState属性发生改变时调用
            xhr.onreadystatechange = function(){
                //判断当前readyState是否为4 , 且响应状态码为200
                if(xhr.readyState==4 && xhr.status==200){
                    //读取响应信息,做相关操作。
                    
                    //如果信息为纯文本
                    xhr.responseText
                    
                    //如果信息为XML
                    xhr.responseXML
                }
            };
    示例展示(使原生js发送AJAX请求):

JSON的全称是JavaScript Object Notation(js对象表示法),它是一种存储和交换文本信息的语法,主要用于序列化对象、数组、字符串、Boolean、数字和null。JSON以纯文本形式存储数据。

<div id="div01"></div>
<button id="btn01" >注册</button>

1, JSON语法和数据类型

网上澳门金莎娱乐 1网上澳门金莎娱乐 2

JSON可以支持以下六种数据类型:对象、数组、字符串、Boolean、数字和null。JSON采用JavaScript语法,所以JSON表示数组,对象等和JavaScript完全一样。大括号保存对象,方括号保存数组。

 1 window.onload = function(){
 2         var btn=document.getElementById("btn01");
 3         btn.onclick=function(){
 4             //1、创建XMLHttpRequest对象,我们使用这个对象完成Ajax请求!
 5             var xhr=new XMLHttpRequest();
 6             
 7             //2、通过open方法设置请求参数
 8             var method="post";
 9             var url ="${pageContext.request.contextPath}/AServlet";
10             xhr.open(method,url);
11             xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
12             
13             //3、发送请求
14             xhr.send("name=zhangsan&&password=123");
15 
16             //4、接受响应信息(服务器向浏览器返回数据)
17             xhr.onreadystatechange = function(){
18                 var s=xhr.responseText;
19                  var a=xhr.readyState;
20                 alert(a); 
21                 if(xhr.readyState==4 && xhr.status==200){
22                     alert(s);
23                 }
24             }
25         }
26     } 

唯一的区别是JSON只支持双引号,所以在JSON文件中表示字符串必须使用双引号,并且对象的键也需要用双引号包裹。

post请求

JSON文件的后缀名是.json。

网上澳门金莎娱乐 3网上澳门金莎娱乐 4

2, JSON对象的方法

 1  window.onload = function(){
 2         var btn=document.getElementById("btn01");
 3         btn.onclick=function(){
 4             //1、创建XMLHttpRequest对象,我们使用这个对象完成Ajax请求!
 5             var xhr=new XMLHttpRequest();
 6             
 7             //2、通过open方法设置请求参数
 8             var method="get";
 9             var url ="${pageContext.request.contextPath}/AServlet";
10             xhr.open(method,url);
11             
12             //3、发送请求
13             xhr.send();    
14             
15             //4、接受响应信息(服务器向浏览器返回数据)
16             xhr.onreadystatechange = function(){                
17                 if(xhr.readyState==4 && xhr.status==200){
18                     var s=xhr.responseText;
19                     //异步获取信息后,即可对页面中的信息进行修改
20                     var div01=document.getElementById("div01");
21                     div01.innerHTML+=s;
22                 }
23             }
24         }
25     }

在JavaScript中,你可以给JSON对象外添加一对单引号,以字符串形式来表示JSON对象。JSON.parse方法:将JSON数据转化为JavaScript对象。

get请求

var myJson = '{"name" : "ren","age" : 12}';var myObj = JSON.parse(myJson);console.log(myObj);//{name:"ren",age:12}
response.getWriter().println("Hello World");//返回响应文本

JSON.stringify方法:将JavaScript对象转换成JSON字符串。

 

var myObj = { name:'ren', age:12};var myJson = JSON.stringify(myObj);console.log(myJson);//"{"name":"ren","age":12}"

    [5] 响应数据的格式
        - 响应一个XML
        - 当我们想通过servlet给ajax返回一个比较大量的信息,返回一个对象。
        - 返回 User :username:sunwukong  age:18 gender:男
            username:sunwukgon,age:18,gender:男
        - 我们可以通过一个XML格式来返回一个大量的信息
            <user>
                <name></name>
                <age></age>
                <gender></gender>
            </user>
            
        - 响应一个JSON对象
            
2.JSON
    [1] JSON简介
        > JSON全称 JavaScript Object Notation(对象表示法)
        > 类似于JS中对象的创建的方法
        > JSON和XML一样,都是一种表示数据的格式

注意:如果服务器返回的是字符串类型数据,JavaScript可以用一个变量接受它,并且能直接使用它。如果服务器返回的是JSON类型数据,请务必使用parse方法把它转换成JavaScript标准对象再对其进行操作。当然,要向服务器发送JSON数据,也应该使用stringify方法把JavaScript对象转换成JSON字符串再发送。

   >JSON 是存储和交换文本信息的语法
        > 但是JSON比XML的存储和解析性能要高的多,JSON要比XML高个30%左右。

二 、AJAX

   >JSON 比 XML 更小、更快,更易解析。
            <user>
                <name>sunwukong</name>
                <age>18</age>
                <gender>男</gender>
            </user>
            
            {"name":"孙悟空","age":8,"gender":男}
        
    [2] JSON的格式
        > JSON字符串不方便阅读,但是传输性能好
        > XML方便阅读,但是传输性能差
        > JSON的格式和JS对象类型,但是要求属性名必须使用双引号。不能使用单引号,也不能不写引号!
        
        
网上澳门金莎娱乐,        > JSON对象中实际就是一组一组的键值对的结构,
            键和值使用:连接,多个键值对之间使用,分开,注意如果是最后一组键值对,则千万不要再加,.
        > {
            "属性名1":属性值1,
            "属性名2":属性值2,
            "属性名3":属性值3,
            "属性名4":属性值4
          }
        
        > JSON运行属性值的类型:
            1.字符串(在双引号中)
            2.数字(整数或浮点数)
            3.布尔(true 或 false)
            4.对象(在花括号中)
            5.数组(在方括号中)
            6.null
            
        > 数组:
            [属性1,属性2,属性3,属性4]

1, 简介

  注意点:JSON对象是用{}括起来的,而数组是用【】括起来的!
    
    [3] JS中使用JSON(JSON对象和JSON字符串之间的相互转换)
        JSON对象 --> JSON字符串
            JSON.stringify(对象)

AJAX的全称是AsynchronousJavaScript And XML(异步javascript和XML)。AJAX通过XMLHttpRequest对象与服务器进行通信。它可以发送和接受各种数据,包括文本文件,XML,HTML,JSON。当然这都不是它最吸引人的地方,AJAX迷人的地方在于它可以是异步的,这意味着它可以在不刷新页面的的情况下向服务器发送请求,并接受和处理服务器返回的信息,从而使我们能够在不刷新页面的情况下使用服务器上的数据修改当前页面。

       例:var jsonStr = JSON.stringify(json);
        JSON字符串 --> JSON对象
            JSON.parse(JSON字符串)
        例:var jsonObj = JSON.parse(jsonStr);
    [4] Java中使用JSON
        > 目前Java中用的比较多的JSON解析工具:
            json-lib -->  使用麻烦,解析性能最差
            Jackson --> 使用较麻烦,解析性能最好
            Gson --> 使用简单,解析性能中能
                - Gson是谷歌出的一款JSON解析工具,使用简单,且性能较好。

2, 使用

1 //声明Gson对象
2 Gson gson = new Gson();
3 
4 //java对象转换为JSON字符串
5 String json = gson.toJson(java对象);
6 //JSON字符串转换为java对象
7 对象类 fromJson = gson.fromJson(json字符串, 对象类.class);

第一步,我们应该先创建一个XMLHttpRequest对象。通过这个对象我们便有了与服务器通信的条件。

网上澳门金莎娱乐 5网上澳门金莎娱乐 6

var  = new XMLHttpRequest();
 1 @Test
 2     public void test() {
 3         //普通对象转化为Json
 4         Student stu=new Student("张三",12);
 5         Gson gson=new Gson();
 6         String json = gson.toJson(stu);
 7         System.out.println(json);
 8         Student fromJson = gson.fromJson(json, Student.class);
 9         System.out.println(fromJson);
10         
11         
12 //        //把Map转换为json字符串
13 //        Map<String, String> map=new HashMap<String, String>();
14 //        map.put("hobby","篮球");
15 //        map.put("gender","男");
16 //        String json2 = gson.toJson(map);
17 //        System.out.println(json2);
18 //        Map<String, String> fromJson2 = gson.fromJson(json2, Map.class);
19 //        System.out.println(fromJson2);
20 //        
21         
22 //        //将List转换为JSON字符串
23 //        List<Student> list=new ArrayList<Student>();
24 //        list.add(new Student("刘德华",53));
25 //        list.add(new Student("冯小刚",63));
26 //        String json3 = gson.toJson(list);
27 //        System.out.println(json3);
28 //        List<Map<String, Object>> fromJson3 = gson.fromJson(json3, List.class);//返回时默认为Map<String, Object>
29 //        System.out.println(fromJson3);
30 //        for(Map map:fromJson3){
31 //            System.out.println(map.get("name"));
32 //        }
33     }

注意,在老版本的IE浏览器(IE6及之前)起中,应该使用ActiveXObject创建。

Gson使用示例

var  = new ActiveXObject('Microsoft.XMLHTTP');

3.通过jQuery实现AJAX
    > 使用get和getJSON都会有缓存问题,并且使用get方法不能传送较多的数据。
    > post方法不会有缓存的问题,所以我们开发时使用post方法较多。
    [1] post()方法    
        $.post(url, [data], [callback], [type])
        参数:
            url:发送AJAX的请求地址,字符串。
            data:发送给服务器的请求参数,JSON格式。
            callback:当前需要获取服务器发送的响应时,我们可以通过该回调函数。
                jQuery会将响应信息以回调函数的参数的形式返回
            type:响应信息的类型,字符串。一般两个常用值text、json 

第二步,在发送请求之前我们应该先定义好与服务器通信的方式并建立连接。

网上澳门金莎娱乐 7网上澳门金莎娱乐 8

(method,url,async);
 1 //jQuery是原生js的进一步封装
 2 $(function(){//$(function(){})等同于原生js中window。location=function(){}
 3     $("#btn01").click(function(){//等同于btn01.onclick
 4         var URL="${pageContext.request.contextPath}/AServle?t="+Math.random();//?t="+Math.random();避免缓存数据
 5         function callback(data){
 6             alert(data);
 7         }
 8         var json={"name":"zhangsan","age":12};
 9         $.get(URL,json,callback);//$代表jQuery
10     })
11 });

method表示请求类型:get,post,head。

JQuery中用ajax发送post请求示例

get和post方式在传输上没有本质的区别,但在实际使用中有以下几点差异:

    [2] get()方法
        - get方法和post方法使用方式基本一致。
    
    [3] getJSON()方法
            getJSON(url, [data], [callback])
            getJSON方法和get方法类似,只不过该方法默认的响应类型为JSON,不需要再手动指定。
 注意: 1、js使用时要导入js包jquery.min.js,一般在WebContent文件下建一个js包存放 2、<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script> 使用时要在头部导入包,但不在此Script中写内容,而是另建Script书写运行代码 

a、get主要用户从服务器获取数据,post具备往服务器发送数据的能力,get方式的请求数据会在url中显示,而post不会,所以说post方式有潜在的危险,而get方式相对安全。b、get方式的数据能被缓存,能被保留在BOM对象history中,能添加页面标签。而post方式不行。c、get方式只允许发送ASCII字符,而post无限制。由于url长度的限制,get方式限制字节长度2048而post方式无限制。

不知道大家是否还记得前面的《JavaScript之本地数据存储》,里面在讲解location.hash时提到url的长度是由浏览器或服务器限制的,而不是javascript语言或通信协议本身限制的。忘记的朋友可以再回去看一下。

head和get方式差不多,唯一的区别是head只包含http报文的头信息,而不会有实际内容。常用来检测服务器上是否已经存在某些数据了。

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:网上澳门金莎娱乐Js中的数据传输形式JSON和AJAX技术

关键词: