Ajax
同步交互是什么异步交互是什么异步交互的优势和劣势
Ajax是什么Ajax指的是什么Ajax涉及的技术Ajax的工作原理Ajax的核心对象实行Ajax的执行步骤创建Ajax的核心对象建立Ajax异步请求连接
同步交互是什么
所谓同步交互，就是指发送一个请求，需要等待返回，才能够发送写一个请求。同步交互相当与排队，轮到下一个的情况会因为前一个而有所不同
第二次请求必须等待第一次请求结束之后才可以开始。
异步交互是什么
异步交互，就是指只发送一个请求，不需要等待返回，随时可以再发送下一个请求，同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待
第二次请求不需要等待第一 次请求结束之后就可以开始。
异步交互的优势和劣势
优势劣势
用户操作无须像同步交互必须等待结果。异步交互破坏了浏览器原有的前进和后退机制。异步交互只需与服务器端交换必要的数据内容，而不是将所有数据全部更新。如果后面逻辑的执行依靠前面逻辑执行的结果的话,异步交互可能会造成问题。异步交互对带宽造成的压力相比同步交互更小。Ajax实现异步交互对搜索引擎支持较弱。通过Ajax实现异步交互不需要任何第三方插件，只要浏览器支持JavaScript语言即可实现。Ajax实现异步交互会引起一些Web安全问题，例如SQL注入攻击、跨站点脚本攻击等问题。
Ajax是什么
Ajax指的是什么
Ajax 被译为异步JavaScript 和XML。Ajax是是指一种创建交互式网页应用的网页开发技术Ajax 它是与服务器交换数据的技术，在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求)，它在不重载全部页面的情况下，实现了对部分网页的更新。
Ajax涉及的技术
HTML页面Cascading Style Sheets ( CSS )JavaScript脚本语言Document Object Model ( DOM)XMLXMLHttpRequest对象
Ajax的工作原理
Ajax的核心对象
核心就是XMLHttpRequest对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能。
XMLHttpRequest对象提供了一个通过URL来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。
XMLHttpRequest对象最初由微软设计，随后被Mozilla、Apple和Google采纳。如今，该对象已经被W3C组织标准化。通过该对象，可以很容易地得到一个URL上的资源数据。尽管名字里有XML，但XMLHttpRequest对象可以得到所有类型的数据资源，并不局限于XML格式的数据。
实行Ajax的执行步骤
创建Ajax的核心对象XMLHttpRequest对象通过XMLHttpRequest对象的open(方法与服务器端建立连接构建请求所需的数据内容，并通过XML HttpRequ Jest对象的send()方法发送给服务器端通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态接收并处理服务器端向客户端响应的数据结果将处理结果更新到HTML页面中
创建Ajax的核心对象
function createXMLHttpRequest(){
var httpReguest;
if (window.XMLHttpRequest) {//适用于Chrome, Firefox, Safari, ..
httpRequest = new XMLHttpRequest();
} else if(window.ActiveXObject) {//适用于IE浏览器
try {
httpRequest = new ActiveXObiect("Msxml2.XMLHTTP");//IE 7+
} catch(e){
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");// IE 6-
} catch(e){}
}
}
return httpRequest;
}
建立Ajax异步请求连接
创建XMLHttpRequest对象
var xhr
= createXMLHttpRequest()
调用XMLHttpRequest对象的open()方法
作用
与服务器端建立连接 open(method,url)方法
method -表示当前的请求方式
常见的请求方式为GET 和 POST url -表示当前请求的服务器端地址链接
xhr
.open('get/post','地址');
调用XMLHttpRequest对象的send()方法
作用
将客户端页面的数据发送给服务器端 send()方法
如果不传递任何数据内容时 - 向该方法传递 null
xhr
.send(null)
利用XMLHttpRequest对象的onreadystatechange事件
作用
用于监听服务器端的通信状态 服务器端的通信状态中 - 存在着处理完毕(信号)
接收服务器端返回的处理结果
xhr
.onreadystatechange = function () {
if(xhr
.readyState
=== 4){
console
.log(xhr
.responseText
);
}
}
补充:
readyState 属性(表示服务器端的通信状态)
值状态描述
0(未初始化)UNSEND代理对象已经被创建，但尚未调用open()方法1(载入)OPENEDopen()方法已经调用，建立与服务端口特定的链接2(载入完成)HEADERS_RECEIVEDsend()方法已经被调用，并获得了状态行和响应头3(交互)LOADING响应体下载中，可能已经下载部分数据了4(完成)DONE响应体下载完成，可以直接使用responseText
将接收到的结果更新到HTML页面
