ajax引擎demo和ajax运作过程浅析

前端之家收集整理的这篇文章主要介绍了ajax引擎demo和ajax运作过程浅析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),这不是一种新的编程语言,是指一种创建交互式网页应用的网页开发技术,是几种技术的集合应用。这是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。 而在ajax技术中,最关键的核心就是XMLHTTPRequest对象。通过这个对象,可以实现异步发送利用JS发送请求和服务器交换数据。用户可以在此同时进行其他操作,不会受影响,用户体验度更好。大概的流程如下:当用户点击到某些动态模块时 -> 调用JS,通过AJAX引擎(其实就是自己写的一个JS)创建XMLHTTPRequest对象,并发送到WEB服务器 -> 服务器接收请求和传过来的参数,根据事先定义好的回调函数,对请求做处理,和后台数据进行交换数据。-> 服务器端得到处理好的数据,返回XML或者JSON形式的语句和静态语句 -> 通过AJAX引擎进行解释—>客户端得到返回的HTML和CSS,呈现给用户。 以下,我们来看以下所谓的ajax引擎的一个demo代码: var xmlHttp; //获取xmlHttp对象 function createXMLHttpRequest() { if (window.XMLHttpRequest) { // 如果可以取得XMLHttpRequest xmlHttp = new XMLHttpRequest(); // Mozilla、Firefox、Safari } else if (window.ActiveXObject) { // 如果可以取得ActiveXObject xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer } } //发送请求 function startRequest(urlString,handleStateChange) { createXMLHttpRequest(); // 建立非同步請求物件 xmlHttp.onreadystatechange = handleStateChange; // 設定callback函式 xmlHttp.open("GET",urlString); // 開啟連結 xmlHttp.send(null); // 傳送請求 } //Post方式 function startRequestByPost(url,queruString,handleStateChange) { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("POST",url); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(queruString); } 如上文所述。每次进行JS异步请求时,都要先创建一个XMLHttpRequest对象,xmlHttp.onreadystatechange是设定回调函数, xmlHttp.open("GET",urlString);(或者是xmlHttp.open("POST",url);)是设定发送请求的方法和打开请求,send是发送参数。(get和post的区别在于前者是明文发送,后者不是明文发送) 接下来看一个整个发送请求到接受HTML的完整流程。 header.jsp代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <script type="text/javascript" src="js/header.js"></script> <script type="text/javascript" src="js/common.js"></script> <DIV> <IMG src="image/logo.gif"> </DIV> <!-- 用户信息、登录注册 --> <DIV class="h" id="logindiv"> 您尚未 <a href="login.jsp">登录</a> &nbsp;| &nbsp; <A href="reg.jsp">注册</A> | </DIV> header.js代码: function handleStateChange() { if (xmlHttp.readyState == 4) { // 測試狀態是否請求完成 if (xmlHttp.status == 200) { // 如果伺服端回應OK //alert("请求返回的是"+xmlHttp.responseText); var s=xmlHttp.responseText var jm=eval('(' + s + ')'); //通过eval函数将json字符串变成一个对象 if(jm.code==1){ $("logindiv").innerHTML="欢迎您:"+jm.obj.uname+"&nbsp;&nbsp;<a href='javascript:logout()'>退出</a>"; }else if(jm.code==0){ $("logindiv").innerHTML="您尚未 <a href='login.jsp'>登录</a>&nbsp;| &nbsp; <A href='reg.jsp'>注册</A>|"; }else if(jm.code==2){ $("logindiv").innerHTML="您尚未 <a href='login.jsp'>登录</a>&nbsp;| &nbsp; <A href='reg.jsp'>注册</A>|"; } } } } function logout(){ startRequest("logout.jsp?jsp="+new Date(),handleStateChange); //alert("已经发出请求"); } window.onload=function(){ startRequest("checkUserSession.jsp?jsp="+new Date(),handleStateChange); //alert("已经发出请求"); } 上述header.jsp是一个BBS的包含脚本,而调用的header.js就是一个ajax引擎,当JSP完成加载时,自动发送请求到checkUserSession.jsp 这个页面是对用户的状态进行判别看是否有用户已经登录。并返回一个JSON数据包(一种类似于XML的数据格式,更省流量)。handleStateChange就是回调函数,对发送回来的JSON进行反解码生成HTML+CSS代码,从而完成了异步调用JS,局部刷新页面。 对于ajax的应用还会非常广泛,以上就是本篇的一个小的概括。

猜你在找的Ajax相关文章