对Ajax的原理的理解和使用

1.什么是ajax?

  AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

  AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

  AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。AJAX 是一种用于创建快速动态网页的技术。

  通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

  传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

2.如何使用?

  1、创建XMLHttpRequest对象

    var xmlhttp = new XMLHttpRequest()

    (有兼容性问题)

    为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

 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");
 }

  2、向服务器发送请求

  我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

  xmlhttp.open(
    method:请求的类型;GET 或 POST,
    url:文件在服务器上的位置,
    async:true(异步)或 false(同步)
  );
  xmlhttp.send(); // 仅用于发送post请求
  如果是post请求,需要发送header信息
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 3响应
  

  使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性来获得响应的内容。


属性描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

 4、
onreadystatechange 事件
  
属性描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status

200: "OK"

404: 未找到页面


  当 readyState 等于 4 且状态为 200 时,表示响应已就绪:


  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }
 


原文地址:https://www.cnblogs.com/ympjsc/p/11851494.html