Ajax笔记整理

什么是Ajax

• Ajax指异步的JavaScript及XML(Asynchronous JavaScript And XML)

• Ajax不是编程语言 , 而是一系列技术的结合 , 为请求数据方式提供了一种不同的模式

  • 普通数据请求方式(全局刷新) ：
    a标签跳转、用户自己输入浏览器地址栏、js中location.herf、form提交
    模式 ： 服务器接收到请求之后 , 把页面需要展示的数据传回浏览器 , 浏览器使用这些新的数据完成的替换掉就得页面数据
  • Ajax数据请求方式(局部刷新) :
    Ajax使用XMLHttlRequest对象发送请求
    模式 ： 服务器接受到请求后 , 把页面需要展示的数据回传到浏览器 , 浏览器读取这些数据 , 但不实用这些数据直接替换掉页面之前的数据 , 而是永续设置一段js来读取返回的数据 , 由这段可以自由编辑的js内容决定返回的数据如何处理(一般根据返回数据操作一些页面特效或者修改旧页面中的数据) , 就得页面数据没有被完全替换掉。

  总结 ：ajax是一种新的与后台交互模式 , 一定程度上需要后台的配合

AJAX技术开发流程

1. 在浏览器内存中 , 创建一个异步请求对象
2. 在异步请求对象中添加工作状态监听器 , 以便于在合适时机下取得异步请求对象中得到响应数据
3. 初始化异步请求对象
   初始化信息 :
   1. 请求方式 post/get
   2. 请求资源路径 /xxx/xxx
   3. 设置同步请求/异步请求

Ajax原理

浏览器中的线程状态 ：
js是单线程的 , 那么是否代表参与js执行过程的线程只有一个？
不会的 , 会由四个线程参与该过程 , 但是永远只有js执行引擎线程在执行js脚本程序 , 其他三个线程只是协助 , 不参与代码解析与执行。参与js执行过程的线程分别是 ：
JS执行引擎线程 ： 也称为js内核 , 负责解析执行JavaScript脚本程序的主程序(例如v8引擎)
事件触发线程 : 归属浏览器内核进程 , 不受JS引擎线程控制 , 主要用于控制事件(如鼠标、键盘事假) , 当该事件被触发时 , 事件触发线程会把该事件处理函数推进事件队列 , 等待js引擎线程执行
定时器触发线程 : 主要控制计时器setInterval和延时器setTimeout , 用于定时器的计算 , 计时器完毕或满足定时器触发条件 , 则将定时器的处理函数推进事件队列中 , 等待js引擎线程执行
注意 : W3C在HTML中规定setTimeout低于4ms的时间间隔算4ms
HTTP异步请求线程 : 通过XMLHttpRequest连接后 , 通过浏览器新开一个线程 , 监控readyState状态变更时 , 如果设置了该状态的回调函数 , 则将该状态的处理函数推进事件队列中 , 等待JS引擎线程执行
注 : 浏览器对同一域名请求的并发连接数量是由限制的 , Chrom和Firefox限制数为6个 , ie8为10个

总结 : 永远只有JS引擎线程调用JS脚本程序 , 其他三个线程只负责将满足触发条件的处理函数推进事件队列 , 等待js引擎线程执行

ajax由js编写使用XMLHttpRequest对象对数据收发进行封装 , 发送ajax请求时 , ajax要求调用方(浏览器) , 开启新线程进行请求 , 并对响应结果进行反复读取 , 当读取到特定状态后 , 停止反复读取 , 读取过程中会把需要运行的js(回调函数)添加入js的执行队列(js执行引擎为单线程) , js执行引擎按队列顺序执行

原生ajax代码步骤

• 创建XMLHttpRequest对象
• 设置回调函数
• 初始化XMLHttpRequest组件(设置)
• 发送请求

//原生ajax调用过程
function myAjaxReq(){
  var xmlhttp;
  if(window.XMLHttpRequest){//新版本的创建方式 IE7 Firefox Chrom Opera Safari
    xmlhttp=new XMLHttpRequest();
  }else{//旧版本创建方式 IE6 IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  //回调函数 , 当请求正常返回时用js操作页面
  xmlhttp.onreadystatechange=function(){
  //readyState  ajax请求的状态  4代表请求发送完成
  //state  http的状态  200代表返回正常
  if(xmlhttp.readyState==4&&xmlhttp.status==200){
  console.log(xmlhttp.responseText);
  document.getElementByid("showspan").innerHTML=xmlhttp.responsetText;
    }
  }
  //设置请求的地址 方式 是否使用异步
  xmlhttp.opne("POST","textAjax",true);
  //设置请求头
  xmlhttp.setRequestHeader("Context-type","application/x-www-form-urlencoded");
  //设置发送参数
  xmlhttp.send("uname"+document.getElementById("username").value);
}
//不得不吐槽一句太麻烦了

• XMLHttpRequest对象的属性和方法
  属性 :
  
  方法 :
  

注意 : 使用ajax时需要自己传递参数 , get方式把参数直接拼接在url后 , post方式把参数写在send方法的参数中

JqueryAjax

原生ajax配置格式不规整 , 使用时经常使用jquery优化后的ajax

//jquery封装的ajax请求
//通过json格式设置参数
  $.ajax({
    url:"ajaxServlet",//地址
    type:"post",//请求类型
    data:{"uname":$("#username").val()},//请求的参数 , 常用json格式
    dataType:"text",//返回数据的类型
    success:function(data){//响应成功时的回调函数 , data表示返回的数据
      consol.log(data);
    }
  });

Jquery中简化了ajax , josn格式为固定参数

• post :

$.post(
  "/url/xxx",//请求地址 
  {key:val},//请求的参数 , json格式
  function(data){},//回调函数
  "json"//返回内容格式 : xml html script json text 
)

• get :

$.get(
  "/url/xxx",//请求地址 
  {key:val},//请求的参数 , json格式
  function(data){},//回调函数
  "json"//返回内容格式 : xml html script json text 
)

• 再进一步简化 :

$.getJSON(
  "发送地址",
  发送参数,
  回调函数 
)

var url="/user/xxx";
var param = {
  "username":xxx,
  "passwd":xxx
};
$.getJSON(url,param,function(data){//data为返回数据
  })

注意 :

1. 使用ajax时 , 需要自己拼接参数 , 可以使用$("#myform").serialize() , 把form序列化成键值对
2. 后台可以借助fastJSON工具 , 给前台返回json格式字符串