JS与AJAX实现异步局部刷新的原理

1、AJAX原理

AJAX(Asynchronous  Javascript  And  XML)=异步   javascript 和XML  可以是网页实现异步更新，就是不重新加载整个页面的情况下，对页面的某部分进行更新(局部刷新)，传统的网页(不使用AJAX)如果需要更新内容，必须重载整个网页页面。AJAX是一种新的思想，整合之前的多种技术，用于创建快速交互式网页应用的网页开发技术。

2、AJAX的实现原理

1)、使用JavaScript获得浏览器内置的AJAX引擎(XMLHttpRequest对象)。

2)、通过AJAX引擎确定请求路径和请求参数。

3)、通知AJAX引擎发送请求。

AJAX引擎会在不刷新浏览器地址栏的情况下，发送请求。

1)、服务器获得请求参数。

2)、服务器处理请求参数(添加、查询等操作)

3)、服务器响应数据给浏览器。

AJAX引擎获得服务器响应的数据，通过执行javaScript的毁掉函数将数据传递给浏览器页面。

1)、通过设置给AJAX引擎的毁掉函数获得服务器响应的数据。

2)、使用JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的。

3、具体的实现代码

Post方式

function SendPost(){//获得ajax引擎  var xmlhttp;  if (window.XMLHttpRequest)  {    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码    xmlhttp=new XMLHttpRequest();  }  else  {    // IE6, IE5 浏览器执行代码    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }  //设置回调函数  xmlhttp.onreadystatechange=function()  {    if (xmlhttp.readyState==4 && xmlhttp.status==200)    {      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  } //提交数据访问服务器资源  xmlhttp.open("POST","/day/helloServlet",true);  //发送请求  xmlhttp.send("username=杰克&password=1234");}

Get方式

function sendGet(){//开启子线程的对象(需要考虑浏览器的兼容性)var xmlhttp;if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp=new XMLHttpRequest();}else{// IE6, IE5 浏览器执行代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}//设置回调函数 xmlhttp.onreadystatechange=function(){//0 还没发送  1发送中 2发送完成，响应已经收到  3响应解析中  4响应解析完成if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//后台传回来的数据}}      //确认请求方式、路径以及参数     xmlhttp.open("GET","/day/helloServlet?username=jack&password=1234",true);     //发送请求    xmlhttp.send(null);}