Ajax与JSON的简介和使用

什么是Ajax

Ajax 等于 Asynchronous JavaScript and XML (异步的JavaScript和XML),现常用json代替XML

XML和JSON是两种传输数据的方式,JSON全称是JavaScript object notation,常用JSON是因为JavaScript更容易处理JSON,且JSON更轻量级,数据量会更少

JSON文件的文件类型是“.json”
JSON文本的MIME类型是“application/json”

为什么用Ajax

用Ajax,web应用可通过异步的方式实现客户端和服务器端的数据交互,Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术

Ajax使用的例子:查询框的建议关键词列表,验证码是否正确的校验,账号是否存在的校验

Ajax的工作原理

在这里插入图片描述

Ajax的好处和坏处

好处:用户体验更好,交互数据更少

坏处:
1.代码比较复杂,比较难调试和维护
2.不利于搜索引擎优化,许多搜索引擎爬虫不会执行JavaScript代码以生成内容.

Ajax 使用例子(代码如下)

在这里插入图片描述

Ajax的运行过程

1.用户触发某个动作,比如单击鼠标
2.创建XMLHttpRequest对象
3.配置XMLHttpRequest对象,比如配置onreadystatechange时触发的函数,请求方法,url等信息
4.XMLHttpRequest对象发送一个异步请求到服务器
5.服务器返回结果
6.XMLHttpRequest会调用之前注册的触发函数,以处理返回结果
7.更新HTML的MOM

XMLHttpRequest

XMLHttpRequest对象的构造器:
new XMLHttpRequest

XMLHttpRequest的各种属性和方法:

readyState属性:表示XMLHttpquest对象的状态
0表示XMLHttpRequest对象已创建,open()方法来调用
1表示open()方法已成功调用;
2表示http响应头已经从服务器端拿到;
3表示http响应内容正在从服务器端装载;
4表示http响应内容已经准备好,用DONE属性也可表示4.

onreadystatechane属性:
事件属性,表示当readystate值改变时。
status属性:表示http响应的状态码,200表示http请求成功返回

open方法:表示初始化一个请求。主要有三个参数:
method / url / async

method为Http方法,例如GET或POST;url为要访问的地址;async为是否异步,默认为true,即以异步方式发送请求

send方法:发送请求。如果请求是异步的(默认是异步),当请求发出后,该方法马上返回。如果请求是GET方法,send方法的参数不需要

responseText:得到文本格式的返回结果

发布了12 篇原创文章 · 获赞 0 · 访问量 172

猜你喜欢

转载自blog.csdn.net/weixin_45722104/article/details/104193152