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 请求 |