笔记-Ajax[1]-的整体流程。

 

Ajax:异步的javascript and xml;(本文内容有部分是来自于js教程网)

Ajax的功能：AJAX 可以与服务器交换数据，在不重新加载（刷新）整个页面的情况下，更新部分页面。

Ajax的使用场景如：

　　-用户注册时，输入完用户名立即提交到后台验证，检测用户名是否存。
　　-静态页面实现登录功能。
　　-瀑布流的实现。

AJAX XMLHttpRequest对象:

　　XMLHttpRequest 对象用于在后台与服务器交换数据，能够在不重新加载整个网页（刷新）的情况下，对网页进行部分更新。

　　XMLHttpRequest 对象是 AJAX 的基础，讲 AJAX ，大部分是在讲 XMLHttpRequest 对象。

　　所有现代浏览器（IE 7.0+、Chrome、FireFox、Opera、Safari）均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

　　对于较新的浏览器，创建 XMLHttpRequest 对象的语法：
　　var xmlhttp=new XMLHttpRequest();

　　对于比较老的IE浏览器（IE5 和 IE6），使用 ActiveX 来创建：
　　var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

　　兼容所有浏览器的创建 XMLHttpRequest 对象的代码：
　　复制纯文本新窗口

　　<script type="text/javascript">
　　var xmlhttp;
　　if(window.XMLHttpRequest){
　　// code for IE7+, Firefox, Chrome, Opera, Safari
　　xmlhttp=new XMLHttpRequest();
　　}else{
　　// code for IE6, IE5
　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
　　}
</script>

AJAX的流程:

　　1:创建ajax对象

　　2:与服务器建立连接 open()方法

　　3:发送请求(http协议) send()方法

　　4:返回数据

一个发送 AJAX 请求的完整代码：

<script type="text/javascript">
　　var xhr;
　　// 创建 XMLHttpRequest 对象
　　try{
　　// code for IE7+, Firefox, Chrome, Opera, Safari
　　xhr=new XMLHttpRequest();
　　}catch(e){
　　// code for IE6, IE5
　　xhr=new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　// 初始化请求参数
　　xmlhttp.open("GET","/demo/javascript/ajax/ajaxDemo.php?action=getIP",true);
　　// 发送请求
　　xmlhttp.send();
</script>

 

open() 方法用来初始化 HTTP 请求参数，但是并不发送请求。

　　语法： open(method,url,async)
　　参数说明：
　　method 必须参数。请求的类型，GET 或 POST。
　　url 必须参数。文件在服务器上的位置。
　　async 必须参数。是否异步发送请求，true（异步）或 false（同步）。
　　注意：AJAX 的强大之处在于异步请求，所以 async 一般设置为 true ，否则将失去意义

open()方法的提交数据方法get和post的区别：get方式提交的数据在url上显示，并且大小是有限制的，安全性不好。post方式是在http请求中传递，理论上数据有大小是限制的

，安全性较好。传递的多个值用&号来连接。

异步和同步的区别:同步是指代码要一步一步来执行，前面 的代码执行完了，后面的代码才可以执行，而异步是前面的代码不影响后面的代码的执行，后面的代码可以先执行。

其实ajax的交换过程和form表单的提交异曲同共之妙。