Ajax-Js原生Ajax和Jquery的Ajax(一)

2017-10-30 09:05:20来源:CSDN作者:weixin_38328865人点击

分享

一、Ajax概述

1.什么是同步,什么是异步

同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态

异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随 意做其他事情,不会被卡死

1.Ajax的运行原理

页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到 服务器端,在这段时间里,客户端可以任意进行任意操作,

直到服务器端将数据返回 Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面1 功能。

一、js原生的Ajax技术(了解)

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原 生的Ajax完成异步操作,有如下几个步骤:

1)创建Ajax引擎对象

2)Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)

3)绑定提交地址

4)发送请求

5)接受响应数据

function fn1(){		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象		var xmlHttp = new XMLHttpRequest();		//2、绑定监听 ---- 监听服务器是否已经返回相应数据		xmlHttp.onreadystatechange = function(){			if(xmlHttp.readyState==4&&xmlHttp.status==200){				//5、接受相应数据				var res = xmlHttp.responseText;				document.getElementById("span1").innerHTML = res;			}		}		//3、绑定地址		xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);		//4、发送请求		xmlHttp.send();			}

onreadystatechange 事件

对ajax引擎在请求服务器响应过程进行监听有如下状态:

readyState:

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

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪 
status:

200: "OK"

404: 未找到页面

如果正常响应则进行接收:

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }

注意:如果是post提交

在发送请求之前设置一个头

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

总结:

所用异步访问都是ajax引擎






最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台