欢迎光临
我们一直在努力

JavaScript | Ajax与Json概念

Ajax定义

Ajax的全称是Asynchronous JavaScript and XML(即异步的JavaScript和XML,它并不是一种新的编程语言,而是集中原有 技术的结合体)

Ajax是一种无需重新加载整个网页的情况下,能够更新部分网页的技术。

Ajax优点

  • 通过异步模式,提升用户体验
  • 优化了浏览器和服务器之间的传输,减少了不必要的数据往返,减少了带宽占用
  • Ajax引擎在客户端运行,承担了一部分本来由服务器承担了的工作,从而减少了大用户量下的服务器负载

Ajax缺点

  • 不支持浏览器的back按钮
  • 安全问题AJAX暴露了与服务器交互的细节
  • 对搜索引擎的支持比较弱

XMLHttpRequest

是一种支持异步请求的技术(对象),是AJAX的核心

XMLHttpRequest作用

  • 可以向服务器提出请求并处理相应,而不阻塞用户
  • 可以再页面加载以后进行页面的局部刷新

Ajax使用步骤

  • 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  • 创建一个新的HTTP请求,并制定该HTTP请求的方法、URL
  • 设置响应HTTP请求状态变化的函数
  • 发送HTTP请求
  • 获取异步调用返回的数据
  • 使用JavaScript和DOM实现局部刷新

创建XMLHttpRequest

创建HTTP请求

语法:open(method,url,async)

功能:创建HTTP请求,规定请求的类型、URL及是否异步处理请求

  • method:请求类型,get、post
  • url:文件在服务器上的位置
  • async:true(异步)或false(同步)

open方法不会向服务器发送真正的请求,它相当于初始化请求并准备发送,它只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错

url参数是open()方法中唯一一个必须要指定的参数,用来设置服务器上文件的地址,该文件可以是任何类型的文件,如:.txt和.xml,或者服务器脚本文件,如.asp/.php等(在传回响应之前,能够在服务器上执行任务)

GET与POST的区别

与POST相比,GET方法更简单更快,并在大部分情况下都能用,然而下面几种情况,只能使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(post没有数据量限制)
  • 发送包含未知字符的用户输入时,post比get更稳定可靠

同步和异步的区别

同步:提交请求—等待服务器处理—处理完毕返回 这个期间内客户端浏览器不能干任何事

异步:请求通过事件触发—服务器处理 (这时浏览器仍然可以做其他的事情)—处理完毕

async是一个布尔值。如果是异步通讯方式(true),客户机就不等待服务器响应;如果是同步方式(false),客户机就要等到服务器返回消息后才能去执行其他操作

XHR对象

请求发往服务器—服务器根据请求生成响应—传回给XHR对象

在收到响应后数据会填充到XHR对象的属性,有四个相关属性会被填充:

  • responseText—从服务器进程返回数据的字符串形式
  • responseXML—从服务器进程返回的DOM兼容的文档数据对象
  • status—从服务器返回的数字代码,404未找到,200已就绪
  • status Test—伴随状态码的字符串信息

发送请求方法

语法:send(string)

功能:将请求发送到服务器

参数说明:string仅用于post请求

注意事项:仅在post请求时可以传入参数,不需要则发送null,在调用send方法之后请求被发往服务器

添加HTTP头

  • 如果需要像HTML表单那样POST数据,需要使用setRequestHeader()来添加HTTP请求头,然后在send()方法中规定希望发送的数据
  • 语法:xmlhttp.setRequestHeader(header,value)
  • 使用:xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

JSON简介

JSON(JavaScript object notation) JavaScript对象表示法,它是一种数据交换的文本格式,而不是一种编程语言,用于读取结构化数据,JSON的出现是为了取代繁琐笨重的XML格式

JSON值的类型

JSON的语法可以表示下面三种类型的值:

简单值:简单值使用与JavaScript相同的语法,可以再json中表示字符串、数值、布尔值和null,但json中的字符串必须用双引号表示,不能用单引号,数值必须是十进制表示,并且不能是NaN,Infinity,也不能是undefined

对象:json中的对象键名必须在双引号里面,因为json不是JavaScript语句,所以没有末尾的分号(注意:同一个对象中不应该出现两个同名的属性)

数组:数组也是一种复杂的数据结构类型,表示一组有序的值的列表,可以通过值的索引来访问其中的值(数组或对象最后一个成员的后面,不能加逗号)

JSON方法

stringify()

语法:JSON.stringify()

功能:用于将一个值转换为字符串,该字符串应该符合JSON格式,并且可以被JSON.parse()方法还原

parse()

语法:JSON.parse()

功能:用于将JSON字符串转化为对象

JSON对象总结

  • JSON之所以流行,是因为可以吧JSON数据结构解析为有用的JavaScript对象
  • JSON对象的stringify()和parse()这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生的JavaScript值
  • JavaScript的eval()类似于JSON.parse()方法,可以将json字符串转换为json对象,但是,eval()可以执行不符合JSON格式的代码,有可能会包含恶意代码,所以尽量少用
赞(1) 打赏
未经允许不得转载:散人研 » JavaScript | Ajax与Json概念
分享到: 更多 (0)

评论 抢沙发

6 + 4 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏