René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"【JavaScript】【学习心得】学习 JavaScript 第十一天","articleBody":"## Ajax\n### Ajax 是什么\n\nAjax 全称为 Asynchronous JavaScript and XML（异步 JavaScript 和 XML），是一种创建交互式网页应用的网页开发技术。简单点说就是以往Web 应用涉及大量的页面刷新：用户点击某个链接，请求发送回服务器，然后服务器根据用户的操作再返回新页面。尽管是网页页面一小部分的变化，也会刷新页面和重新加载整个页面，诸如页面logo,导航，footer 区域等。而使用 Ajax 就可以做到只更新页面中的一小部分，而不用刷新整个页面。\n### Ajax 原理\n\nAjax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发**异步请求**，从服务器获得数据，然后用 JavaScript来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。\n以往我们浏览网页的原理是由 Client 向 Server 提交页面申请，再由 Server 将申请通过 HTTP 传回给 Client 生成浏览页面：\n\n![Ajax 原理图](http://yianbin.qiniudn.com/fe-ajax-a.png)\n\n使用 Ajax 后的工作原理如下图，可见通过 Ajax 在用户交互方面有了很大改进，用户可以不用为提交了 Form 而长时间等待服务器应答，而且通过 Ajax 也可以开发出华丽的 Web 交互页面。\n\n![Ajax 原理图](http://yianbin.qiniudn.com/fe-ajax-b.png)\n\nAjax 的适用范围：它依赖 JavaScript，有可能有浏览器不支持，另搜索引擎的蜘蛛程序也不会抓取相关内容。\n### XMLHttpRequest\n\nAjax 技术的核心是 XMLHttpRequest 对象，它充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。\n\n由于XXX 的 IE 浏览器 实现的 XMLHttp 方式不一样，我们有必要再一次来兼容下。\n\n``` js\nfunction getHTTPObject() {\n  if (typeof XMLHttpRequest == \"undefined\") {\n    XMLHttpRequest = function() {\n      try { return new ActiveXObject(\"Msxml2.XMLHTTP.6.0\");}\n        catch (e) {}\n      try { return new ActiveXObject(\"Msxml2.XMLHTTP.3.0\");}\n        catch (e) {}\n      try { return new ActiveXObject(\"Msxml2.XMLHTTP\");}\n        catch (e) {}\n      return false;\n    }\n  }\n  return new XMLHttpRequest();\n}\n```\n\n为了模拟 Ajax 服务器请求，我们首先建立一个 HTML 页面\n\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh-cmn-Hans\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eAjax DEMO\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"new\"\u003e\u003c/div\u003e\n\u003cscript src=\"addLoadEvent.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"1-7-2.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n命名为 1-7-2.html,在同级文件夹下建立一个1-7-2.txt里随便输入一些内容。\n\nXMLHttpRequest 对象常用方法为 open 方法，它用来指定服务器上将要访问的文件，指定请求类型：GET、POST 或 SEND。这个方法第三个参数用于指定请求是否以异步方式发送和处理。\n\n``` js\nfunction getHTTPObject() {\n  if (typeof XMLHttpRequest == \"undefined\") {\n    XMLHttpRequest = function() {\n      try { return new ActiveXObject(\"Msxml2.XMLHTTP.6.0\");}\n        catch (e) {}\n      try { return new ActiveXObject(\"Msxml2.XMLHTTP.3.0\");}\n        catch (e) {}\n      try { return new ActiveXObject(\"Msxml2.XMLHTTP\");}\n        catch (e) {}\n      return false;\n    }\n  }\n  return new XMLHttpRequest();\n}\n\nfunction getNewContent() {\n  var request = new getHTTPObject();\n  if (request) {\n    request.open(\"GET\",\"1-7-2.text\",true);\n    request.onreadystatechange = function() {\n      if (request.readyState == 4) {\n        var para = document.createElement(\"p\");\n        var txt = document.createTextNode(request.responseText);\n        para.appendChild(txt);\n        document.getElementById(\"new\").appendChild(para);\n      }\n    };\n    request.send(null);\n  } else {\n    alert (\"对不起，您的浏览器不支持 XMLHttpRequest!\");\n  }\n}\n\naddLoadEvent(getNewContent);\n```\n\n浏览器加载 HTML 页面 没有反应，为什么呢。把它放在tomcat webapp 目录下 启动你的tomcat 然后再试试。Ajax 需要向服务器发起请求，而不是单纯的像我们之前用浏览器打开一个静态的 HTML 页面\n如图所示：是不是很帅气的出现了。\n\n![tomcat webapp 文件目录](http://paddingme.qiniudn.com/ajax.PNG)\n![页面 demo](http://paddingme.qiniudn.com/demo.PNG)\n\n其中上述的 onreadystatechange 是一个事件处理函数。它会在服务器给 XMLHttpRequest 对象送回响应时的时候被触发执行。\n\n``` js\nrequest.onreadystatechange = function() {\n    //处理响应\n}\n```\n\n在你 onreadystatechange 指定函数引用是，不要在函数名后加括号（表示立即调用），我们的目的是指向把函数自身的引用（而不是函数结果）赋值给 onreadystatechange 属性。\n\n```\nrequest.onreadystatechange = dosomething;\n```\n\n在指定了请求的目标之后，也明确了如何处理响应之后，用 send 方法发送请求。\n\n``` js\nrequest.send(null);\n```\n\n如果 浏览器不支持 XMLHttpRequest 对象 还需要做处理。\n\n服务器在向 XMLHttpRequest 对象返回响应时，该对象有许多属性可用，浏览器会在不同阶段更新 readystate 属性的值：\n- 0 表示未初始化\n- 1 表示正在加载\n- 2 表示加载完毕\n- 3 表示正在交互\n- 4 表示完成(此时，可以访问服务器发回来的数据了)\n\n访问服务器发回来的数据有两个属性：\n- responseText 属性：用于保存文本字符串形式的数据；\n- responseXML 属性：用于保存 Content-Type 头部中指定为 “text/xml” 的数据，其实为一个 DocumentFragment 对象, 可用各种 DOM 方法来处理此对象。\n\n在使用 Ajax 一定要注意 **同源策略**。 使用 XMLHttpRequest 对象发送的请求只能访问与其所在的 HTML 处于同一个域中的数据，不能向其他域发送请求。\n\n注意 Ajax 是异步请求，异步请求很容易忽略其异步性——脚本的执行不会等 send 的响应，而是会继续执行。\n### 渐进增强的使用 Ajax\n\n**Ajax 应用主要依赖于服务器端处理，而非客户端处理**，实际上是服务器端的脚本完成了绝大部分工作。XMLHttpRequest 对象作为浏览器与服务器之间的“中间人”，它只是负责传递和响应。如果把它拿掉，浏览器与服务器之间的请求和响应应该继续完成，只不过需要的时间可能会长点。\n构建 Ajax 网站的最好方法是先构建一个常规的网站，然后渐进增强的使用 Ajax（Hijax）。\n\np.s.:其中部分内容引自：[AJAX 的工作原理](https://github.com/infp/Front-end-Interview/blob/master/source/javascript.md#21%E8%AF%B7%E5%B0%BD%E5%8F%AF%E8%83%BD%E8%AF%A6%E5%B0%BD%E7%9A%84%E8%A7%A3%E9%87%8A-ajax-%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86)\n","author":{"url":"https://github.com/paddingme","@type":"Person","name":"paddingme"},"datePublished":"2014-11-27T14:07:18.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2},"url":"https://github.com/15/Learning-JavaScript/issues/15"}