• 不断学习才有回报,学无止境!

ajax学习笔记(3)

箭翎 5次浏览 0个评论 扫描二维码

如果需要像HTML表单那样POST数据,可以使用setRequestHeader()来添加HTTP头,然后在send()方法中规定发送的数据:

<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST", "demo/ajax/test/postParam.php", true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("webName=测试&age=3");
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
html代码部分:
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="查看效果"/>
</div>

ajax的true异步或者false同步:

(1).在等待服务器响应时执行其他脚本。
(2).当响应就绪后对响应进行处理。
一.关于open()方法:
结构:

xmlhttp.open(method,url,async);

注意:
open()方法具有三个参数,最后一个参数是一个布尔值,就是用来规定是否采用异步方式。
当async=true的时候,也就是规定采用异步操作,也就是说ajax操作并不会阻塞代码的执行,等执行处理完毕通过onreadystatechange事件对响应进行处理

ajax的服务器响应内容:

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

onreadystatechange 事件

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

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

  • 0: 请求未初始化

  • 1: 服务器连接已建立

  • 2: 请求已接收

  • 3: 请求处理中

  • 4: 请求已完成,且响应已就绪

status 200: “OK”
404: 未找到页面

回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

ajax与XML文件交互

<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var xmlDoc = xmlhttp.responseXML;
      var str = "";
      var targets = xmlDoc.getElementsByTagName("target");
      for (index = 0; index < targets.length; index++) {
        str = str + targets[index].childNodes[0].nodeValue + "<br>";
      }
      document.getElementById("show").innerHTML = str;
    }
  }
  xmlhttp.open("GET", "demo/ajax/xml/XML.xml", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="查看效果"/>
</div>
xml文件代码如下:
<?xml version="1.0" encoding="utf-8" ?>
<bookstore>
  <book>
    <range>前端</range>
    <author>测试</author>
    <target>css</target>
  </book>
  <book>
    <range>前端</range>
    <author>测试</author>
    <target>div</target>
  </book>
  <book>
    <range>资源</range>
    <author>测试</author>
    <target>特效</target>
  </book>
  <book>
    <range>前端</range>
    <author>测试</author>
    <target>PHP</target>
  </book>
</bookstore>


箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明ajax学习笔记(3)
喜欢 (0)

Warning: copy(D:\phpstudy_pro\WWW\blog/avatar/.png) [function.copy]: failed to open stream: No such file or directory in D:\phpstudy_pro\WWW\blog\wp-content\themes\Record2.0\functions.php on line 495

Warning: filesize() [function.filesize]: stat failed for D:\phpstudy_pro\WWW\blog/avatar/.png in D:\phpstudy_pro\WWW\blog\wp-content\themes\Record2.0\functions.php on line 499

Warning: copy(D:\phpstudy_pro\WWW\blog/avatar/.png) [function.copy]: failed to open stream: No such file or directory in D:\phpstudy_pro\WWW\blog\wp-content\themes\Record2.0\functions.php on line 499
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址