关于Ajax

什么是Ajax?

​ Asynchronous JavaScript + XML（异步JavaScript和XML）:由多种技术组成。使用Ajax技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高网页加载速度，从而缩短用户等待时间，改善用户体验。

Ajax简史：

​ 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

​ Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

Ajax工作原理：

​ 多种技术的总和 = JavaScript + 异步数据获取技术XMLHttpReuqest + xml + DOM + XHTML和CSS

​ XMLHttpReuqest：JavaScript的API，支持浏览器发送GET或POST请求，通过向服务器发送HTTP请求，浏览器返回数据时使用JavaScript只修改页面中的一部分内容。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • 优点：可以和XHTML无缝集成，无需插件
  • 缺点：依赖JavaScript，影响浏览器默认行为

1、创建XMLHTTPRequest对象:

httpRequest  = new XMLHttpRequest()  
httpRequest  = new ActiveXObject('Msxml2.XML')    ----IE6及以上
httpRequest  = new ActiveXObject('Microsoft.XMLHTTP') 

//兼容处理
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

2、属性：

  • onreadystatechange: 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

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

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
  • readyState：

创建－初始化请求－发送请求－接收数据－解析数据－完成

readyState 状态 状态说明
(0)未初始化 此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
(1)载入 此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
(2)载入完成 此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互 此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
(4)完成 此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。
  • responseText: 获取从服务器返回的数据，返回字符串形式的响应
  • responseXML:获取从服务器返回的数据，返回XML 对象
  • 请求 books.xml 文件，并解析响应：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;
  • status: 200---->"OK" 404---->not found

3、方法：

1、httpRequest.open('GET', 'http://www.example.org/some.file', true);:

  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置,文件可以是任何类型
  • async：true（异步）或 false（同步），使用ajax必须设置为异步

2、httpRequest.send();

  • string：仅用于 POST 请求

GET 还是 POST？

​ 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

​ 然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET:

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

POST:

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，要使用 setRequestHeader() 来添加 HTTP 头。

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

setRequestHeader(header,value)向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

Callback函数：

​ callback 函数是一种以参数形式传递给另一个函数的函数，如果在一个网站存在多个 AJAX 任务，那么将创建 XMLHttpRequest 对象编写成一个的函数，并为每个 AJAX 在任务调用该函数。

var xmlhttp;
function loadXMLDoc(url,cfunc)  {
    if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  }
  else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=cfunc;
  xmlhttp.open("GET",url,true);
  xmlhttp.send();
}
function myFunction() {
  loadXMLDoc("/ajax/test1.txt",function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
常用案例：

1、showHint()---------AJAX服务器页面-ASP和PHP

function showHint(str) {
  var xmlhttp;
  if (str.length==0) {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  }
  else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","gethint.asp?q="+str,true);
  xmlhttp.send();
}

源代码解释：

如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。

如果输入框不为空，showHint() 函数执行以下任务：

  • 创建 XMLHttpRequest 对象
  • 当服务器响应就绪时执行函数
  • 把请求发送到服务器上的文件
  • 请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

2、showCustomer()-----------数据库

function showCustomer(str) {
  var xmlhttp;
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  }
  else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getcustomer.asp?q="+str,true);
  xmlhttp.send();
}

showCustomer() 函数执行以下任务：

  • 检查是否已选择某个客户
  • 创建 XMLHttpRequest 对象
  • 当服务器响应就绪时执行所创建的函数
  • 把请求发送到服务器上的文件
  • 请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 关于ajax学习笔记
    一、什么是AJAX，为什么要使用Ajax（请谈一下你对Ajax的认识） ajax全称Asynchronous Ja...
    dnaEMx阅读 437评论 0赞 2
  • 十八、Ajax 与 Comet
      2005 年，Jesse James Garrett 发表了一篇在线文章，题为“Ajax: A new App...
    霜天晓阅读 914评论 0赞 1
  • 关于AJAX
    1.需要掌握以下知识点 ①，AJAX全称（Asynchronous JavaScript and XML），异步 ...
    印第安老斑鸠_333阅读 177评论 0赞 1
  • Ajax的运用
    AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,378评论 0赞 7
  • 关于ajax的问题
    ajax的过程。 1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象 2. 创建一个新的HTT...
    AdonisL阅读 567评论 0赞 4