加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Ajax 技术

发布时间:2020-12-15 21:27:20 所属栏目:百科 来源:网络整理
导读:下周一,新项目要开始编码了。源于自己之前没做过前端,不想拖团队的后腿,所以周末补充下前端的知识。这篇博客只是先整理下基本的思路,后期会对其进行扩充。 Ajax基本概念 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) 鉴于Asynch

下周一,新项目要开始编码了。源于自己之前没做过前端,不想拖团队的后腿,所以周末补充下前端的知识。这篇博客只是先整理下基本的思路,后期会对其进行扩充。

Ajax基本概念

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
鉴于Asynchronous 这个单词,还去查了下有道,会读了。

ajax技术意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,提高用户体验。

XMHttpRequest

基本概念

这部分应该是ajax 技术中的核心部分。
(因为是学习记录,所以我只描述下结果)
IE5 和IE6 支持ActiveXObject 对象,并不支持xmlHttpRequest技术,但是现代浏览器都支持xmlHttpRequest技术,所以需要使用xmlHttpRequest对象,首先必须进行检测判断。
源码如下:

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+,Firefox,Chrome,Opera,Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6,IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

请求

客户端访问服务器端两种形式GET和POST

GET
xmlhttp.open("get",url,async);
xmlhttp.send();

规定请求的类型、URL 以及是否异步处理请求。
url:文件在服务器上的位置
async:true(异步)或 false(同步)

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

服务器响应

获得来自服务器的响应,使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。(进行解析处理)

readystate

当请求被发送到服务器时,readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪

status

200: "OK" 
 404: 未找到页面

所以出现如下经典的代码:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

总结完毕,欢迎指正。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读