【Ajax】学习笔记

爱胡思乱想的猫
103 阅读5分钟

一、什么是Ajax

Ajax全称Asynchronous Javascript And XMl)异步Javascript和XML，即使用Javascrip语言与服务器进行异步交互，传输的数据为XML（不一定只是XML，可以是PHP、文本、json等）。

Ajax简单原理：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

Ajax：客户端与服务器，可以在【不刷新整个页面】的情况下，与服务器进行异步通讯的技术

  • 异步：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。
  • 同步：客户端发出一个请求后，无需等待服务器响应结束，就能发出第二个请求

二、为什么我们需要Ajax

在我们之前的开发中，每当用户向服务器发送请求，哪怕只需要更新一点点的局部内容，服务器都会将整个页面进行刷新。这样会导致以下问题：

  • 性能会有所降低，刷新整个页面，需要耗费时间较长
  • 用户的在页面中的操作会被中断，影响用户体验

三、Ajax使用场景

  • 普通的文本输入提示和自动完成的场景

  • 用Ajax进行数据验证（判断用户名是否已经存在的提示）

  • 用Ajax自动更新页面： 通过Ajax引擎在后台进行定时轮询，向服务器发送请求，查看是否有最新数据，若有则将最新数据（不是所有数据）下载并在页面上进行动态更新，通过JavaScript等方式通知用户）

四、Ajax优缺点

1、优点

  • 异步交互：增加用户体验感
  • 性能：因为服务器不需要响应整个页面，只需响应部分内容，较少了服务器的压力

2、缺点

  • 无端的增加对服务器的访问次数，给服务器增加了很多压力
  • ajax干掉了back按钮，即对浏览器后退机制的破坏
  • 开发者在不经意间会暴露比以前更多的数据和服务器逻辑
  • 对搜索引擎的支持比较弱
  • 破坏了程序的异常机制
  • 违背了url和资源定位的初衷
  • 一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，如手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的

四、XMLHttpRequest对象

Ajax最重要的一个对象就是XMLHTTPRequest对象。

1、XMLHttpRequest工作原理

当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器

XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上

2、创建XMLHttpRequest对象

要创建XMLHttpRequest对象是要分两种情况考虑的：

  • 在IE6以下的版本
  • 在IE6以上的版本以及其他内核的浏览器(Mozilla)等
<script type="text/javascript">
    var xhttp;
    if(window.XMLHttpRequest) {
        // 在IE6以上的版本以及其他内核的浏览器(Mozilla)等
        xhttp = new XMLHttpRequest();
    }else if(window.ActiveXObject) {
        // 在IE6以下的版本
        xhttp = new ActiveXObject();
    }
</script>

3、XMLHttpRequest对象的属性和方法

方法

常用的已加粗

  • open() (String method,String url,boolean asynch,String username,String password)
xhttp.open("GET", "xxxx.txt", true)：用于创建与服务器的http连接

第一个参数：指定提交方式（post、get）
第二个参数：指定服务器（文件）位置
第三个参数：指定是同步还是异步（true异步，false同步）
第四五个参数：在http认证的时候会用到（可选）
  • send(content)
xhttp.send(content)：用于发送请求给服务器

content：如果是get方法，不需要填写参数，或填写null
content：如果是post方法，把要提交的参数写上去
  • setRequestHeader(String header,String value)
xhhtp.setRequestHeader()：设置消息头（使用post方式才会使用到，get方法并不需要调用该方法）

  • getAllResponseHeaders()：返回所有来自服务器响应的头部信息

  • getResponseHeader(String header)：返回来自服务器响应的特定头部信息

  • abort()

属性

常用的已加粗

  • onreadystatechange
请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数
  • readyState：请求状态readyState一改变，回调函数被调用，它有5个状态
0：未初始化
1：open方法成功调用以后
2：服务器已经应答客户端的请求
3：交互中,Http头信息已经接收，响应数据尚未接收。
4: 请求已完成且响应已就绪

200: "OK"
403: "Forbidden"
404: "Page not found"
  • responseText：服务器返回的文本内容
  • responseXML：服务器返回的兼容DOM的XML内容
  • statusText：服务器返回状态码的文本信息

五、Ajax实例

使用回调函数
Ajax实例

六、问题

1、XMLHttpRequest缓存问题

  • 产生缓存的原因就是：我们请求了同一个地址，做了相同的操作。服务端认为我的操作并没有什么变化，就直接把缓存的信息给我了。
  • 解决：
    • 在每次请求url中加入一个时间戳参数【每次url就不一样了】
    • 加入时间戳参数到url时，也分两种情况
      • url本身就带有参数了，也就是说有"?"号了，那么添加时间戳的时候就需要用"&"号
      • url没有参数，直接使用"?"号来添加时间戳
      if(url.indexOf("?") >= 0){
  url = url + "&t=" + (new Date()).valueOf();
} else{
  url = url + "?t=" + (new Date()).valueOf();
}

2、POST请求怎么处理

一般只有我们发送请求的时候带有参数，才需要使用Post请求。

  1. 首先我们在使用xhttp.open()方法的时候添加的参数应该改为POST。
  2. 其次我们发送请求xhhtp.send()的时候，参数应该填写，而且不是null
  3. 这个时候呢，我们要添加一步：设置Content-Type请求头：
xhttp.open("POST","xxx.txt",true)
xhttp.setRequestHeader("Contnet-Type","application/x-www-form-urlencoded");
xhttp.send("fname=zhangsan&psd=123")
avatar
文章
阅读
粉丝