Ajax学习笔记

全局刷新和局部刷新

01 全局刷新

整个浏览器被新的数据覆盖，在网络中传输大量的数据，浏览器需要加载，渲染页面

02 局部刷新

在浏览器的内部，发起请求，获取数据，改变页面中的部分内容

局部刷新的速度更快，可以按需获取数据

ajax是用来做局部刷新的，局部刷新使用的核心对象是 异步对象（XMLHttpRequest）

这个异步对象是存在浏览器内存中的，使用javascript语法创建和使用 XMLHttpRequest 对象

局部刷新特点

• Ajax请求的局部更新，浏览器地址栏不变
• 局部更新不会舍弃原来的页面内容

Ajax概念

Asynchronous Javascript and XML（异步的 Javascript 和 XML）

Asynchronous：异步

• 同步只能处理一个请求
• 异步可以分开处理多个请求

Ajax是一种做局部刷新的新方法（2003年左右），不是一种语言。

Ajax包含的技术主要有JavaScript，dom，css，xml等等，核心是JavaScript和xml。

JavaScript负责创建异步对象，发送请求，更新页面的dom对象。

Ajax请求需要服务器端的数据。

xml：可扩展标记语言

• 网络中的传输的数据格式

• 目前使用 json 替换了 xml

Ajax异步实现步骤

ajax中使用XMLHttpRequest对象

step 01 创建异步对象

var xmlHttp = new XMLHttpRequest();

step 02 给异步对象绑定事件

• 给异步对象绑定onreadstatechange事件，获知请求的状态的变化

• onreadystatechange事件

  • 当请求被发送到服务器时，我们需要执行一些基于响应的任务
  • 当异步对象发起请求，获取了数据，都会触发这个事件
  • 每当 readyState 改变时，就会触发onreadystateChange 事件

• 这个事件需要指定一个函数，在函数中处理状态的变化

  • 此事件可以指定一个处理函数function

bth.onclick = fun1(); // 点击这个按钮会触发fun1函数
function fun1(){
   
  alert("按钮单击");
}
// For example,
xmlHttp.onreadystatechange = function(){
    // 用匿名函数直接指定
  // 处理请求的状态变化
  if( xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
   
      // 数据已经返回来准备好了 && 网络请求是成功的
      // 可以处理服务器端的数据，更新当前页面
      var data = xmlHttp.responseText;
      // 获取服务器返回的数据，使用异步对象的属性 res