【AJAX】关于AJAX的基础知识

Ajax

• 针对于前端的语言,是JS,HTML,CSS等前端语言的整合

局部刷新和全局刷新

• 全局刷新

  • 全局刷新是网站全部内容都会被替换,在网络中含有大量的数据,浏览器需要加载,渲染页面

• 局部刷新

  • 局部刷新是在原有的网站基础不变的情况下对局部的内容进行更新,其余页面不需要加载或是渲染,网络中传输的量少,对用户比较友好,目前应用广泛

• Ajax就是来做局部刷新的

AJAX组成

• Asynnchronous:异步

• JavaScript:javascript脚本,在浏览器中运行

• and:和

• xml:是一种数据格式

XMLHttpRequest(异步对象)

• 这个对象是存在浏览器内存中的,是由JS语法创建和使用XMLHttpRequest对象

• 创建XMLHttpRequest对象的语法（xhr）

  • var xmlhttp=new XMLHttpRequest

  • AJAX中的核心对象就是XMLHttpRequest

在Ajax中使用XMLHttpRequest对象

• 第一步:创建异步对象

  • var xmlhttp=new XMLHttpRequest

• 第二步:给异步对象绑定事件(onreadystatechange:当异步对象发起请求,获取了数据都会触发这个事件,这个事件需要指定一个函数,在函数中处理状态的变化)

  • 格式:

    • xmlhttp.onreadystatechange=function(){
          //处理请求的状态变化
          if(xmlhttp.readyState==4&&xmlhttp.status==200){
          //可以处理服务器端的数据,更新当前页面
              var data=xmlHttp.responseText;
              document.getElementById("name").value=data;
          }
      }

• XMLHttpRequest对象的三个重要属性:

  • onreadystatechange属性:一个js函数名或直接定义函数,每当readyState属性改变时,就会调用该函数

  • readyState属性:

    • 存有XMLHttpRequest的状态,从0到4发生变化

    • 0:请求未初始化,创建异步请求对象var xmlhttp=new XMLHttpRequest

    • 1:初始化异步请求对象,xmlHttp.open(请求方式,请求地址,true)

    • 2:异步对象发送请求,xmlHttp.send()

    • 3:异步对象接受应答数据,从服务器端返回数据,XMLHttpRequest内部处理

    • 4:异步请求对象已经将数据解析完毕,此时才可以读取数据(更新当前页面)

  • status属性:

    • 200:"OK"

    • 404:未找到界面

• 第三步:初始化异步请求对象

  • 异步对象的方法open()

    • xmlHttp.open(请求方式(get/post),请求地址,true(异步(true)/同步(false))

• 第四步:使用异步对象发送请求

  • xmlHttp.send()

• 获取服务器端返回的数据,使用异步对象的属性responseText

  • 使用格式:xmlHttp.response

• Ajax会有回调机制:当请求的状态发生变化时,异步对象会自动调用onreadystatechange事件所对应的函数

json的使用

• Ajax发起请求------servlet(返回一个json格式的字符串{name:"河北",jiancheng:"冀",shenghui:"石家庄"})

• json的分类:

  • json对象,JSONObject,这种对象的格式,名称:值,也可以看作key:value的格式

  • json数组,JSONArray,基本格式[{name:"河北",jiancheng:"冀",shenghui:"石家庄"}]

• json的优点

  • json格式容易理解

  • json格式数据在多种语言中,比较容易处理,使用Java,JavaScript读写json格式的数据比较容易

  • json格式数据占用的空间小,在网络中传输速度快,用户体验好

• 在JS中,可以把json格式的字符串,转为接送对象,json中的key就是json对象的属性名

同步和异步的区别

• 异步请求处理

  • 使用异步对象发起请求后,不用等待数据处理完毕,就可以执行其他的操作

  • 可以同时执行多条语句,效率较高

• 同步请求处理

  • 在任意时刻只能执行一个异步请求

  • 必须在异步对象处理完成请求,从服务器端获取数据后,才能执行send之后的代码

  • 效率较低