关于Ajax

最新推荐文章于 2022-05-22 18:38:19 发布

IMAGE_M

最新推荐文章于 2022-05-22 18:38:19 发布

阅读量262

点赞数

分类专栏： summary

summary 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用Ajax 可以做到只更新页面中的一小部分，不必再次加载整个页面了。其他内容一一标志、导航、头部、脚部，都不用重新加载。

Ajax 的主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容，而不会打断用户的浏览体验。利用Ajax ，可使Web 应用功能丰富、交互敏捷,Ajax 有它自己的适用范围。Ajax依赖JavaScript，所以可能会有浏览器不支持它，而搜索引擎的蜘蛛程序也不会抓取到有关内容。

XMLHttpRequest 对象
Ajax 技术的核心就是XMLHttpRequest 对象。这个对象充当着浏览器中的脚本(客户端)与服务器之间的中间人的角色。
微软最早在IE5 中以ActiveX 对象的形式实现了一个名叫XMLHTTP 的对象。在IE 中创建新的对象要使用下列代码:
var request = new ActiveXOb ject(“Msxml2 .XMLHTTP.3.0”);
其他浏览器则基于XMLHttpRequest 来创建新对象:
var request = new XMLHttpRequest();
更麻烦的是，不同IE 版本中使用的XMLHTIP 对象也不完全相同。

在你的脚本中要使用XMLHttpRequest 对象时，可以将这个新对象直接赋值给一个变量:
var request = getHTTPObject()j
XMLHttpRequest 对象有许多的方法。其中最有用的是open 方法，它用来指定服务器上将要访
问的文件，指定请求类型:GET、POST 或SEND。这个方法的第三个参数用于指定请求是否以异步
方式发送和处理。

注意在为onreadystatechange 指定函数引用时，不要在函数名后面加括号。因为加括号表示立即调用函数，而我们在此只想把函数自身的引用(而不是函数结果)赋值给onreactystate-change 属性。
request.onreadystatechange = doSomething;

在指定了请求的目标，也明确了如何处理响应之后，就可以用send 方法来发送请求了:
request.send(null);

在使用Ajax 时，千万妥注意同源策略。使用XMLHttpRequest 对象发送的请求只能访问与其所在的HTML 处于同一个域中的数据，不能向其他域发送请求。

服务器在向XMLHttpRequest 对象发回响应时，该对象有许多属性可用，浏览器会在不同阶段更新readyState 属性的值，它有5 个可能的值:
口0 表示未初始化
口1 表示正在加载
口2 表示加载完毕
口3 表示正在交互
口4 表示完成
只要readyState 属性的值变成了4 ，就可以访问服务器发送回来的数据了。
访问服务器发送回来的数据要通过两个属性完成。

一个是responseText 属性，这个属性用于保存文本字符串形式的数据。
另一个属性是responseXML 属性，用于保存Content-Type 头部中指定为”text/xml”的数据，其实是一个DocumentFragment 对象。你可使用各种DOM 方法来处理这个对象。而这也正是XMLHttpRequest 这个名称里有XML 的原因。

aiax.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Ajax</title>
</head>
<body>
  <div id="new"></div>
  <script src="main.js"></script>  
</body>
</html>

main.js

function addLoadEvent (func) {
  var oldonload = window.onload
  if (typeof window.onload !== 'function') {
    window.onload = func
  } else {
    window.onload = function () {
      oldonload()
      func()
    }
  }
}

function getHTTPObject () {
  if (typeof XMLHttpRequest === 'undefined') {
    XMLHttpRequest = function () {
      try { return new ActiveXObject('Msxml2.XMLHTTP.6.0') } catch (e) {}
      try { return new ActiveXObject('Msxml2.XMLHTTP.3.0') } catch (e) {}
      try { return new ActiveXObject('Msxml2.XMLHTTP') } catch (e) {}
      return false
    }
  }
  return new XMLHttpRequest()
}

function getNewContent () {
  var request = getHTTPObject()
  if (request) {
    request.open('GET', 'example.txt', true)
    request.onreadystatechange = function () {
      if (request.readyState === 4) {
        var para = document.createElement('p')
        var txt = document.createTextNode(request.responseText)
        para.appendChild(txt)
        document.getElementById('new').appendChild(para)
      }
    }
    request.send(null)
  } else {
    alert("Sorry,your browser doesn\'t support XMLHttpRequest")
  }
}
addLoadEvent(getHTTPObject)
addLoadEvent(getNewContent)

最后在同一目录文件下创建example.txt

IMAGE_M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Ajax

使用Ajax 可以做到只更新页面中的一小部分，不必再次加载整个页面了。其他内容一一标志、导航、头部、脚部，都不用重新加载。Ajax 的主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容，而不会打断用户的浏览体验。利用Ajax ，可使Web 应用功能丰富、交互敏捷,...
复制链接

扫一扫