首页 > 代码库 > 笔记-Ajax[1]-的整体流程。

笔记-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表单的提交异曲同共之妙。