[Ajax] Ajax的基本用法

同步交互与异步交互

 

同步交互是什么

所谓同步交互，就是指发送一个请求，需要等待返回，然后才能够发送下一个请求。

同步交互相当于排队，轮到下一个的情况会因为前一个而有所不同。

第二次请求必须等待第一次请求结束之后才可以开始。

 

异步交互是什么

所谓异步交互，就是指指发送一个请求，不需要等待返回，随时可以再发送下一个请求。

同步交互与异步交互的区别在于同步交互需要等待结果，而异步交互不需要等待。

第二次请求不需要等待第一 次请求结束之后就可以开始。

 

异步交互的优势和劣势

优势	劣势
用户操作无须像同步交互必须等待结果。	异步交互破坏了浏览器原有的前进和后退机制。
异步交互只需与服务器端交换必要的数据内容，而不是将所有数据全部更新。	如果后面逻辑的执行依靠前面逻辑执行的结果的话,异步交互可能会造成问题。
异步交互对带宽造成的压力相比同步交互更小。	Ajax实现异步交互对搜索引擎支持较弱。
通过Ajax实现异步交互不需要任何第三方插件，只要浏览器支持JavaScript语言即可实现。	Ajax实现异步交互会引起一些Web安全问题，例如SQL注入攻击、跨站点脚本攻击等问题。

 
 

Ajax是什么

参考Ajax官方文档

Ajax是什么

• Ajax = 异步 JavaScript 和XML。
• Ajax是是指一种创建交互式网页应用的网页开发技术
• Ajax 它是与服务器交换数据的技术，在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求)，它在不重载全部页面的情况下，实现了对部分网页的更新。

 

Ajaxi涉及的技术

• HTML页面
• Cascading Style Sheets ( CSS )
• JavaScript脚本语言
• Document Object Model ( DOM)
• XML
• XMLHttpRequest对象

 

Ajax的工作原理

Ajax异步交互的整体执行流程过程中，HTML页面是不被更新的。只是更新部分数据内容。

 

Ajax的核心对象

核心就是XMLHttpRequest对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能。

XMLHttpRequest对象提供了一个通过URL来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。

XMLHttpRequest对象最初由微软设计，随后被Mozilla、Apple和Google采纳。如今，该对象已经被W3C组织标准化。通过该对象，可以很容易地得到一个URL上的资源数据。尽管名字里有XML，但XMLHttpRequest对象可以得到所有类型的数据资源，并不局限于XML格式的数据。

 
 

实现Ajax异步交互

实现Ajax的执行步骤

1. 创建Ajax的核心对象XMLHttpRequest对象
2. 通过XMLHttpRequest对象的open(方法与服务器端建立连接
3. 构建请求所需的数据内容，并通过XML HttpRequ Jest对象的send()方法发送给服务器端
4. 通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态
5. 接收并处理服务器端向客户端响应的数据结果
6. 将处理结果更新到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(载入)	OPENED	open()方法已经调用，建立与服务端口特定的链接
2(载入完成)	HEADERS_RECEIVED	send()方法已经被调用，并获得了状态行和响应头
3(交互)	LOADING	响应体下载中，可能已经下载部分数据了
4(完成)	DONE	响应体下载完成，可以直接使用responseText

• 将接收到的结果更新到HTML页面

 
 

细节补充

• 利用XMLHttpRequest对象的onreadystatechange事件

xhr.onreadystatechange = function () { // 监听服务器端的通信状态
	console.log(xhr.readyState);
    if(xhr.readyState === 4){
    	console.log(xhr.status);
    	if(xhr.status === 200){
    		console.log(xhr.responseText);
    	}
    }
    if(xhr.readyState === 4 && xhr.status === 200){
        /*
            接收服务器端响应的结果
                responseText属性- 专门接收字符串 类型的结果内容
                responseXML属性 - 专门接收XML数据格式的结果内容
        */
    	console.log(xhr.responseText);
    }
}

补充:

status 属性(得到当前请求之后的响应状态码)
 

响应状态码	状态码说明
100	客户必须继续发出请求
101	客户要求服务器根据请求转换HTTP协议版本
200	交易成功
201	提示知道新文件的URL
202	接受和处理、但处理未完成
203	返回信息不确定或不完整
204	请求收到，但返回信息为空
205	服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206	服务器已经完成了部分用户的GET请求
300	请求的资源可在多处得到
301	删除请求数据
302	在其他地址发现了请求数据
303	建议客户访问其他URL或访问方式
304	客户端已经执行了GET，但文件未变化
305	请求的资源必须从服务器指定的地址得到
306	前一版本HTTP中使用的代码，现行版本中不再使用
307	申明请求的资源临时性删除
400	错误请求，如语法错误
401	请求授权失败
402	保留有效ChargeTo头响应
403	请求不允许
404	没有发现文件、查询或URl
405	用户在Request-Line字段定义的方法不允许
406	根据用户发送的Accept拖，请求资源不可访问
407	类似401，用户必须首先在代理服务器上得到授权
408	客户端没有在用户指定的饿时间内完成请求
409	对当前资源状态，请求不能完成
410	服务器上不再有此资源且无进一步的参考地址
411	服务器拒绝用户定义的Content-Length属性请求
412	一个或多个请求头字段在当前请求中错误
413	请求的资源大于服务器允许的大小
414	请求的资源URL长于服务器允许的长度
415	请求资源不支持请求项目格式
416	请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417	服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500	服务器产生内部错误
501	服务器不支持请求的函数
502	服务器暂时不可用，有时是为了防止发生系统过载
503	服务器过载或暂停维修
504	关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505	服务器不支持或拒绝支请求头中指定的HTTP版本

• 调用XMLHttpRequest对象的send()方法
  • 参数data
    • 表示要向服务器端发送的请求数据
  • 请求方式
    • 如果当前的请求方式为GET的话 - send()方法中只能传递null值
      • 将请求数据添加到请求地址链接中
  • 两种情况
    • 发送数据 - user=zhangwuji&pwd=123456
      • 请求数据的格式
        • 如果具有多个请求数据的话，之间使用"&"进行分隔
        • 每个数据格式 -> name=value
    • 不发送数据 - send()方法中必须传递null值，而不能为空

xhr.open('get','地址?user=zhangwuji&pwd=123456');
xhr.send("user=zhangwuji&pwd=123456")

GET请求的地址后面要手动添加 ?内容
POST请求的地址不用手动添加 ?内容

 
 

GET与POST请求方式

方法	描述
open(method,url,async)	规定请求的类型、URL以及是否异步处理请求.
send(string)	将请求发送到服务器.

 

GET请求方式

• 将构建的请求数据添加到open()方法中的url地址中

• 将发送请求数据的send()方法中参数设置为null值

 

POST请求方式

• 调用send()方法之前，需要通过XMLHttpRequest对象的setRequestHeader()方法设置请求头信息。

• 通过XMLHttpReguest对象的send()发送请求数据。

//设置请求头部信息
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

 

get与post的区别

GET请求的特点:

• GET 请求可被缓存

• GET 请求保留在浏览器历史记录中

• GET 请求不应在处理敏感数据时使用

• GET 请求有长度限制

• GET 请求只应当用于取回数据

• GET 请求可被收藏为书签

POST请求的特点:

• POST 请求不会被缓存

• POST 请求不会保留在浏览器历史记录中

• POST 请求对数据长度没有要求

• POST 请求不能被收藏为书签

区别从GET和POST的特点中很好发现