原生ajax

ajax

同步与异步的区别
同步的理解:

同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去。

异步的理解:

异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,提高执行的效率。

AJAX技术

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

AJAX 的特点
优点:

可以无需刷新页面,与服务器进行通信:允许依据用户事件来更新部分页面内容。

缺点:

没有浏览历史,不能回退:存在跨域问题 (同源) ;SEO不友好(搜索引擎优化,对爬虫不友好)。

AJAX 原理

客户端发送请求,请求交给 XMLHttprequest ,XMLttpRequest 把请求提交给服务,服务器进行业务处理,服务器响应数据交给XMLHttpRequest 对象,XMLHttpRequest 对象接收数据,由javascript把数据写到页面上。

原生 AJAX

Ajax 工作流程:Ajax 通过 XmlHttpRequest 对象来向服务器发出异步请求,从服务器获得数据,然后用Javascript 来操作 DOM,进而更新页面。

第一步创建:

创建 Ajax对象(XmlHttpRequest)var xmlhttp = new XLHttpRequest()

第二步判断请求方式:

判断数据的传输方式 (get/post) ,打开连接 (open())xmlhttp.open("get","http", true)

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

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

readyState

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

status

200: OK404:未找到页面。

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

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

  • responseXML 获得 XML 形式的响应数据。

代码如下:

xmlhttp .onreadystatechange = function() {

if(xmlhttp.status == 200 && xmlhttp.readystate == 4) {

document.write(xmlhttp.responseText)

}

}

第四步 发送请求:

xmlhttp.send()

数据交换格式

数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式。前端领域,经常提及的两种数据交换格式分别是 XML和JSON。

xml

XML 是指 Extensible Markup anguage(可扩展标记语言),标准通用标记语言的子集,简称XML,是一种用于标记电子文件使其具有结构性的标记语言。

特点:
  • 使用类似 HTML 的标签描述,标签成对出现。

  • 标签名字随意,没有预定义。

  • 标签名字就是属性名,标签中间存储属性的值。

  • 没有值的属性可以自闭和,<name/>,表示 name 属性没有值

  • mimetype=application/xm1,独立存在文件叫叫*.xm1.

  • 虽然长得像 HTML,但是和 HTML 没有关系。

XML 与 HTML 功能对比

xml 的重点是为了传输和存储数据,是数据的载体;一般是程序员来解析得到标签中的内容.html 的重点是描述网页内容,是网页内容的载体:一般是浏览器来解析并显示成页面。

json

JSON 是指JavaScript Object Notation (S 对象简谱),是一种轻量级的数据交换格式,javascript 对象表示法。JSON 是一种轻量级的文本数据交换格式,在作用上类似于 XML,专门用于存储和传输数据,但是]SON 比XML 更小、更快、更易解析。

json两种结构

JSON 就是用于字符串来表示avascript 的对象和数组,所以,JSON 中包含对象和数组两种结构,通过这两种结构的相互嵌套,可以表示各种复杂的数据结构。

对象结构

对象结构在 SON 中表示为{}括起来的内容。数据结构为{key: value, key: value,...} 的键值对结构。其中,key 必须是使用英文的双引号包裹的字符串,value 的数据类型可以是数字、字符电、布尔值、null、数组、对象 6 种类型

数组结构

数组结构在jSON 中表示为[]括起来的内容。数组结构为["java","javascript",30,true,...]数组中数的类型可以是数字、字符串、布尔值、null、数组、对象 6 种类型。

JSON 语法注意事项
  • 属性名必须使用双引号包真

  • 字符串类型的值必须使用双引号包裹

  • JSON 中不允许使用单引号表示字符串

  • JSON 中不能写注释

  • JSON 的最外层必须是对象或数组格式

  • 不能使用 undefined 或函数作为JSON 的值

JSON 和JS 对象的关系

JSON 是S 对象的字符串表示法,它使用文本表示一个JS 对象的信息,本质是一个字符串。

JSON和JS 对象的相互转换

要实现从json字符串转换为js 对象,使用]SON.parse()方法

要实现从js对象转换为json 字符串,使用JSON.stringify() 方法

工作中常用json还是xml作为传输的格式
json 是最常用的方式
  1. 解析简单

  1. 结构清晰

xml的缺点:
  1. 内容比ison 大,传输比 ison 占用更多的带宽

  1. 解析很麻烦,需要借助解析框架,门槛高

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值