Ajax的使用四大详细步骤

时间:2024-11-06 03:43:48 AJAX 我要投稿
  • 相关推荐

Ajax的使用四大详细步骤

  什么是ajax?

  ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。

  如何使用ajax?

  第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。

  var xhttp;if (window.XMLHttpRequest) {//现代主流浏览器xhttp = new XMLHttpRequest();} else {// 针对浏览器,比如IE5或IE6xhttp = new ActiveXObject("Microsoft.XMLHTTP");}

  第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。

  xmlhttp.open(method,url,async) method包括get 和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)

  xhttp.send();使用get方法发送请求到服务器。

  xhttp.send(string);使用post方法发送请求到服务器。

  post 发送请求什么时候能够使用呢?

  (1)更新一个文件或者数据库的时候。

  (2)发送大量数据到服务器,因为post请求没有字符限制。

  (3)发送用户输入的加密数据。

  get例子:

  xhttp.open("GET", "ajax_info.txt", true);xhttp.open("GET", "index.html", true);xhttp.open("GET", "demo_get.asp" + Math.random(), true);xhttp.send();

  post例子

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

  post表单数据需要使用xmlhttprequest对象的setRequestHeader方法增加一个HTTP头。

  post表单例子

  xhttp.open("POST", "ajax_test.aspx", true);xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhttp.send("fname=Henry&lname=Ford");

  async=true 当服务器准备响应时将执行onreadystatechange函数。

  xhttp.onreadystatechange = function() {if (xhttp.readyState == 4 && xhttp.status == 200) {document.getElementById("demo").innerHTML = xhttp.responseText;}};xhttp.open("GET", "index.aspx", true);xhttp.send();

  asyn=false 则将不需要写onreadystatechange函数,直接在send后面写上执行代码。

  xhttp.open("GET", "index.aspx", false);xhttp.send();document.getElementById("demo").innerHTML = xhttp.responseText;

  第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

  使用responseText属性得到服务器响应的字符串数据,使用responseXML属性得到服务器响应的XML数据。

  例子如下:

  document.getElementById("demo").innerHTML = xhttp.responseText;

  服务器响应的XML数据需要使用XML对象进行转换。

  例子:

  xmlDoc = xhttp.responseXML;txt = "";x = xmlDoc.getElementsByTagName("ARTIST");for (i = 0; i < x.length; i++) {txt += x[i].childNodes[0].nodeValue + "

  ";}document.getElementById("demo").innerHTML = txt;

  第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。

  onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。

  readyState属性,XMLHttpRequest对象的状态,改变从0到4,0代表请求未被初始化,1代表服务器连接成功,2请求被服务器接收,3处理请求,4请求完成并且响应准备。

  status属性,200表示成功响应,404表示页面不存在。

  在onreadystatechange事件中,服务器响应准备的时候发生,当readyState==4和status==200的时候服务器响应准备。

  例子:

  function loadDoc() {var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (xhttp.readyState == 4 && xhttp.status == 200) {document.getElementById("demo").innerHTML = xhttp.responseText;}};xhttp.open("GET", "ajax_info.txt", true);xhttp.send();} //函数作为参数调用

  Let AJAX change this text.

  Change Content

  function loadDoc(url, cfunc) {var xhttp;xhttp=new XMLHttpRequest();xhttp.onreadystatechange = function() {if (xhttp.readyState == 4 && xhttp.status == 200) {cfunc(xhttp);}};xhttp.open("GET", url, true);xhttp.send();}function myFunction(xhttp) {document.getElementById("demo").innerHTML = xhttp.responseText;}

【Ajax的使用四大详细步骤】相关文章:

使用Word2010创建图表的详细操作步骤07-04

使用ajax操作JavaScript对象的方法09-28

美甲的详细步骤07-11

做寿司的详细步骤10-05

Ajax使用JSON数据格式案例分析01-10

企业管理的详细步骤08-13

咖啡拉花的详细步骤10-15

大酱汤的做法详细步骤08-05

怎么做寿司详细步骤09-27

结婚迎亲详细流程步骤01-01