原生Ajax

原生ajax

---

1 表单提交

---

• get请求 放在地址后面，且只能传递几k的数据

地址栏发出的请求

• post请求 无限制，不可见，安全性高，速度较慢

表单提交

1.1 表单提交的原则

表单提交主要是通过表单元素的 name = value 进行传递数据的，但是表单提交时需要注意一下原则:

• name 相同的表单提交格式

如果 name 值相同的表单提交，该 name 值会出现多次，且对应不同表单的值.

• 没有 name 的表单、含有 disabled 的表单元素

表单元素没有 name 属性、含有 disabled 属性都会被禁止提交在进行表单控制时，如果某一个表单即不可以被编辑但同时也需要被提交，可以设置 readonly 属性，通过给含有 readonly 属性表单添加特定的 css样式来模拟 disabled 的样式。

• radio、checkbox 选中值却没有 value 属性radio、checkbox 选中值却没有 value 属性

提交时只会提示当前 name 表单为 on，不会自动获取text 的值，如果没有选中值，就提交该表单元素，即不会出现当前 name 表单为 off 的情况。

同理 select 标签的被选中的 option 没有 value 属性值也获取不到传递的值

2 表单序列化

---

2.1 serialize()

可以选择多个表单

2.2 serializeArray()

3 Ajax

---

3.1 同步与异步的区别

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

• 同步就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要--直等待。用户使用起来会有不友好。

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

2. 异步就相当于当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率。

3.2 Ajax技术

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

传统的网页 (不使用 AJAX) 如果需要更新内容，必需重载整个页面。XML，可扩展标记语言，被设计用来传输和存储数据。XML和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。以前Aiax 是用XML 格式的字符串进行数据交换，现在已经逐渐被JSON 所取代了。

3.3 Ajax特点

优点

• 可以无需刷新页面，与服务器进行通信。

• 允许依据用户事件来更新部分页面内容。

缺点：

• 没有浏览历史，不能回退。

• 存在跨域问题 (同源) 。

• SEO不友好 (搜索引擎优化，对爬虫不友好)。

4 Ajax原理

---

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

5 原生Ajax

---

Ajax工作流程:Ajax 通过 XmlHttpRequest 对象来向服务器发出异步请求，从服务器获得数据，然后用Javascript 来操作 DOM，进而更新页面。1、创建Ajax对象(XmlHttpRequest)var xmlhttp = new XMLHttpRequest(O;2、判断数据的传输方式 (get/post)，打开连接 (open0)javascriptxmlhttp.open("get","http://127.0.0.1:8089"， true);

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

3、获得响应如需获得来自服务器的响应，请使用XMLHttpRequest 对象的 responseText 或 responseXML 属性.属性responseTextresponseXML描述获得字符串形式的响应数据获得XML 形式的响应数据。

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性:

属性

onreadystatechange

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

readyState

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

status

200: 0K;404:未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务当 readyState 等于 4且状态为 200 时，表示响应已就绪。如需获得来自服务器的响应，使用XMLHttpRequest 对象的 responseText 或 responseXML属性.

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

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

6 数据交换格式

---

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

6.1 XML

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

6.1.1 XML 的特点

• 使用类似 HTML的标签描述，标签成对出现。

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

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

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

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

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

6.1.2 XML与 HTML 功能对比

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

6.2 JSON

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

JSON 是在 2001 年开始被推广和使用的数据格式，迄今为止，JSON 已经成为了主流的数据交换格式。

6.2.1JSON 的两种结构

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

• 对象结构

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

• 数组结构

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

6.2.2JSON 语法注意事项

• 属性名必须使用双引号包裹,

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

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

• JSON 中不能写注释

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

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

6.2.3JSON 和JS 对象的关系

SON是JS 对象的字符串表示法，它使用文本表示一个JS 对象的信息，本质是一个字符串

6.2.4JSON 和JS 对象的相互转换

要实现从JSON 字符串转换为JS 对象，使用JSON.parse() 方法:

要实现从JS 对象转换为JSON 字符串，使用JSON.stringify0 方法

制定计划 底薪 绩效 奖金