文档章节

JavaScript之JSON&AJAX

o
 osc_isezqdgg
发布于 2019/09/19 09:58
字数 1807
阅读 9
收藏 0

精选30+云产品,助力企业轻松上云!>>>

  今天为大家讲解JavaScript中非常流行的数据传输形式JSON和异步技术AJAX技术。

 

一   JSON

 

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

 

  1,  JSON语法和数据类型

  JSON可以支持以下六种数据类型:对象、数组、字符串、Boolean、数字和null。

  JSON采用JavaScript语法,所以JSON表示数组,对象等和JavaScript完全一样。大括号保存对象,方括号保存数组。

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

  JSON文件的后缀名是.json。

 

  2,  JSON对象的方法

  在JavaScript中,你可以给JSON对象外添加一对单引号,以字符串形式来表示JSON对象。

  JSON.parse方法:将JSON数据转化为JavaScript对象。

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

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

1 var myObj = {
2     name:'ren',
3     age:12
4 };
5 var myJson = JSON.stringify(myObj);
6 console.log(myJson);//"{"name":"ren","age":12}"

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

 

二   AJAX

 

  1,  简介

  AJAX的全称是Asynchronous JavaScript And XML(异步javascript和XML)。

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

 

  2,  使用

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

1 var httpRequest = new XMLHttpRequest();

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

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

  

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

1 httpRequest.open(method,url,async);

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

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

      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报文的头信息,而不会有实际内容。常用来检测服务器上是否已经存在某些数据了。

          url是请求的服务器地址,需要遵守同源策略。

          async是一个布尔值,true表示异步,false表示同步(别用这个,否则可能会出现意料之外的结果)

  由于浏览器一般会先从缓存中读取数据,所以我们在使用get方式发送请求时,可以添加一个唯一ID让我们每次都直接从服务器获取数据:

1 httpRequest.open('get','url?=' + new Date().getTime());//时间戳
2 httpRequest.open('get','url?=' + Math.random());//随机数

  请注意,如果您想要post数据,则可能必须设置请求的MIME类型。比如,你想要向表单一样post数据,那么你必须在open和send方法之间调用setRequestHeader方法(该方法用于设置请求的http头信息,两个参数,第一个属性名,第二个属性值):

1 httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//2.5步

  关于http请求头信息,请看这里:https://baike.baidu.com/item/http请求头

  

  第三步,发送请求。

1 httpRequest.send();

  如果在open中你选择了post方式,那么你可以在send方法中添加你想要向服务器发送的数据,否则即使添加了数据也无效。

1 httpRequest.send('{name:"ren",age:12}');

  

  第四步,数据处理。

  XMLHttpRequest对象有一个事件属性:onreadystatechange。你可以给该属性添加一个函数引用或一个匿名函数,用以处理从服务器返回的信息。

1 httpRequest.onreadystatechange = function (){};

  另外XMLHttpRequest对象还有两个存储通信状态的属性:readyState和status(每当readyState的值改变时,都会触发上面的onreadystatechange事件),和两个存储接收内容的属性:responseText,responseXML。

         readyState表示请求状态:

                   0:请求未初始化,还没有调用open();

                   1:已与服务器建立连接,刚调用了send();

                   2:http请求已发送,send()执行完毕;

                   3:http请求处理中,服务器正在解析请求的内容;

                   4:请求已完成,内容解析完毕,响应已准备就绪。

         status表示响应状态,返回http状态码:

                   200:成功接受到服务器返回内容;

                   404:服务器未找到相关内容;

                   503:服务器不可用。

         responseText:解析为字符串类型的响应。

         responseXML:解析为DOM对象类型的响应

我们要想使用服务器返回的信息,需要先确保正确的拿到了这些信息,所以事件处理函数内部应该有检测机制:

1 if(httpRequest.readyState == 4 && httpRequest.status == 200){
2     fnSuc(responseText);
3 }else{
4     if(fnFail){
5         fnFail(httpRequest.status);
6     }
7 }

         并且,可以把相应的服务器响应信息当做参数传递进去。

  

  最后附上ajax函数的简单封装:

 1 function ajax(method,url,Fnsucc,Fnfail){
 2     var httpRequest = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
 3     httpRequest.open(method,url,true);
 4     httpRequest.send();
 5     httpRequest.onreadystatechange = function (){
 6         if(httpRequest.readyState == 4){
 7           if(httpRequest.status == 200){
 8             FnSuc(httpRequest.responseText);//处理完成后的文件内容。
 9           }else{
10             if(FnFail){
11               FnFail(httpRequest.status);//根据http错误状态码,进行相应处理。
12                 }    
13             }
14         }
15     }
16 }

   该函数旨在让我们理解Ajax的工作过程,可能并不能满足实际工作的需要。如果要在工作中使用,你还应该继续完善它的功能,比如send的参数,超时时间等。

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
前端数据交互之json&ajax

1.json   json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式。   json的作用:在不同的系统平...

osc_xbmy69c2
2019/03/11
14
0
Django 之Ajax&Json&CORS&同源策略&Jsonp用法

什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。 它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储...

osc_y4jbxqkl
2018/02/08
2
0
加密&json&StringIO模块&BytesIO模块

一、加密 加密 md5 rsa hashlib (适用于python2) 案例一: import hashlib # m = hashlib.md5() # src = "123456" # m.update(src) # print(m.hexdigest()) m3 = hashlib.md5("123456".enc......

osc_lsc01x8k
2018/04/28
2
0
解决跨域问题,实例调用百度地图

<h5>1.什么是跨域?</h5><p>浏览器对于javascript的同源策略的限制,例如a.com下面的js不能调用b.com中的js,对象或数据(因为a.com和b.com是不同域),所以跨域就出现了。同域的概念又是什么呢?...

osc_le55s1ks
2018/12/23
4
0
Beginning JavaScript with DOM Scripting and Ajax 第二版免积分下载

Beginning JavaScript with DOM Scripting and Ajax Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition 本书介绍 Beginning JavaScript with DOM Scripting and Ajax 是现代j......

起风了123
2019/01/06
1
0

没有更多内容

加载失败,请刷新页面

加载更多

阻塞锁,非阻塞锁,自旋锁,互斥锁

1.阻塞锁 多个线程同时调用同一个方法的时候,所有线程都被排队处理了。让线程进入阻塞状态进行等待,当获得相应的信号(唤醒,时间) 时,才可以进入线程的准备就绪状态,准备就绪状态的所有...

osc_umiwij2c
9分钟前
0
0
Asp.NetCore3.1 WebApi中模型验证

前言   不管是前端,还是后端,做数据合法性验证是避免不了的,这边文章就记录一下Asp.NetCore3.1 WebApi中的模型验证; 传统写法--不使用模型验证   来,先上图:   我相信,应该绝大...

osc_qgfjs4a5
10分钟前
21
0
龙芯开源社区上线.NET主页

龙芯团队从2019年7 月份开始着手.NET Core的MIPS64支持研发,经过将近一年的研发,在2020年6月18日完成了里程碑性的工作,在github CoreCLR 仓库:https://github.com/gsvm/coreclr, 随后受...

osc_bj12kvua
10分钟前
11
0
高并发下浏览量入库设计

一、背景 文章浏览量统计,low的做法是:用户每次浏览,前端会发送一个GET请求获取一篇文章详情时,会把这篇文章的浏览量+1,存进数据库里。 1.1 这么做,有几个问题: 在GET请求的业务逻辑里...

osc_uj3h5gt9
11分钟前
17
0
nginx timeout 配置 全局timeout 局部timeout web timeout

nginx比较强大,可以针对单个域名请求做出单个连接超时的配置. 比如些动态解释和静态解释可以根据业务的需求配置 proxy_connect_timeout :后端服务器连接的超时时间_发起握手等候响应超时时间...

osc_5cok9i01
13分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部