AJAX+JSON总结

ajax原理

AJAX是基于现有的Internet标准,并且联合使用它们:

  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

1、使用步骤

创建 XMLHttpRequest 对象

variable=new XMLHttpRequest();

XMLHttpRequest 对象的三个重要的属性:

属性

描述

onreadystatechange

存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪

status

200: "OK" 404: 未找到页面

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

status 200: "OK" 404: 未找到页面

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

AJAX - 向服务器发送请求请求

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步)

send(string)

将请求发送到服务器。 string:仅用于 POST 请求

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)

send(string) 将请求发送到服务器。

  • string:仅用于 POST 请求

服务器响应

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性

描述

responseText

获得字符串形式的响应数据。

responseXML

获得 XML 形式的响应数据。

总结:创建xmlHttpRequst对象,使用open(method,url,async)和send(string)向服务器发送响应。获取服务器响应的结果为responseText和responseXML。

JSON

JSON: JavaScript Object Notation(JavaScript 对象表示法)。JSON 通常用于与服务端交换数据,在接收服务器数据时和在向服务器发送数据时一般是字符串。

JSON两大功能

1、将数据转为JavaScript对象:JSON.parse(text[, reviver])

参数说明:

  • text:必需, 一个有效的 JSON 字符串。
  • reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。

2、将JavaScript对象转为字符串:JSON.stringify(value[, replacer[, space]])

参数说明:

  • value: 必需, 一个有效的 JSON 对象。
  • replacer: 可选。用于转换结果的函数或数组。 如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined,则排除成员。根对象的键是一个空字符串:""。 如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时,将忽略 replacer 数组。
  • space: 可选,文本添加缩进、空格和换行符,如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格,如果 space 大于 10,则文本缩进 10 个空格。space 有可以使用非数字,如:\t。

以上为原生ajax的应用。

jQuery ajax

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏强仔仔

【Hexo实战】SEO(百度、Google)设置

推广是一个烦人的事情啊喂,特别是对于我们搞技术的来说,可能就不擅长推广,那么怎么才能让别人知道我们呢,我们就要想办法让别人通过搜索就可以搜索到你博客的内容,给我...

29730
来自专栏前端导学

php设计模式读书笔记

重构,简单点说是重命名一个属性或者方法,复杂点说是压缩一个已有的类。改变你的代码使得它符合一个或者更多的设计模式是另外一种重构。

13620
来自专栏喵了个咪的博客空间

Grpc — 整体性能测试

当然最最最重要的就是性能,在使用RPC的场景下对于多个程序通讯完成业务所消耗的性能是有巨大挑战的,笔者也做了一套完整的性能测试大家可以继续往下看。

58730
来自专栏强仔仔

【SVN】教你如何替换主干代码

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

15630
来自专栏大数据智能实战

python实现elastcsearch中timestampe(long)类型的date_histogram聚合测试

由于老版本的elasticsearch不支持date类型,因此之前的存储(5.0版本)都用了timestamp来进行设计。

12710
来自专栏前端导学

anwsion问答系统研究笔记

/app/文件夹下是action 所有action类都继承/system/中的基类AWS_CONTROLLER /models/文件夹下是mode...

7620
来自专栏维C果糖

Akka 指南 之「第 1 部分: Actor 的体系结构」

使用 Akka 可以让你从为 Actor 系统创建基础设施和编写控制基本行为所需的初级(low-level)代码中解脱出来。为了理解这一点,让我们看看你在代码中...

10720
来自专栏魏晓蕾的专栏

Ubuntu及RHEL双Linux操作系统安装教程

本文是在一台PC上安装Ubuntu 8.10和RHEL 5.4。安装顺序是首先安装Ubuntu 8.10然后安装RHEL 5.4,当然这样的安装顺序...

19020
来自专栏冷冷

【重构】Spring Cloud OAuth 无Token调用源码封装

书接上回Spring Security OAuth 微服务内部Token传递的源码解析,本篇主要无token 调用过程中,代码的不断完善及其重构过程。

15410
来自专栏素质云笔记

深度学习菜鸟的信仰地︱Supervessel超能云服务器、深度学习环境全配置

SuperVessel的云端GPU共享技术为全球首发,**它基于POWER 8处理器和NVIDIA® Tesla® K40 GPU加速器的异构计算系统。**Te...

18920

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励