原生Ajax

Ajax介绍

Ajax = Async JavaScript And XML (异步的JavaScript和XML)。

同步与异步的区别

同步的理解：

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

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

异步的理解：

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

异步就相当于当客户端发送给服务端请求时，在等待服务端响应的时候，客户端定位 u的事情。这样节约了时间，提高了效率

Ajax 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

比如百度搜索,百度注册,天猫、京东等

传统的网页〔不使用AJAX)如果需要更新内容,必需重载整个网页面。

XML可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，不同的是 HTML中都是预定义标签,而ML中没有预定义标签,全都是自定义标签,用来表示一些数据。

存储数据的类型

XML

Xml又叫可扩展标记语言，主要用来传输和存储数据，xml和html类似，都是使用标签，不同的是html中都是预定义标签标签嵌套标签

麻烦已不常用

json 

json 和 js 对象的相互转换

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

var obj = JSON.parse('{"a":"hello","b":"world"}');
// 结果为{a:'hello',b:'world'}

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

var obj = JSON.stringify(a:"hello",b:"world");
// 结果为{'a':'hello','b':'world'}

Ajax特点：

优点：

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

缺点：

•  没有浏览历史，不能回退
•  存在跨域问题（同源）
•  SEO不友好（搜索引擎优化，对爬虫不友好）

Ajax原理

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

 一、原生Ajax

Ajax工作流程：

Ajax通过 XMLHttpRequest 对象来向服务器发出异步请求，从服务器获取数据，然后用 JavaScript 来操作DOM而更新页面。

        （1）创建Ajax对象 XMLHttpRequest

var xmlhttp = new XMLHttpRequest()

        （2）判断数据的传输方式(get/post)，打开连接open()

xmlhttp.open("get", "http://127.0.0.1:8090", true)

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

        （3）获得响应

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

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
        document.write(xmlhttp.responseText);
    }
}

onreadystatechange 事件

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

下面是XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数(或函数名)，每当readlyState属性改变时。就会调用该函数。
readyState	存有XMLHttpRequest的状态。 从0到4发生变化。 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪
status	200："OK" 404：未找到页面

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

当readyState等于4且状态为200时,表示响应已就绪。

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

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

        （4）发送send()

xmlhttp.send()

方法	描述
send(string)	将请求发送到服务器。string：仅用于 POST 请求