2023年6月21日发(作者：)
Ajax技术介绍（本⽂内容参照了Headerfist-Ajax和w3schools，所有代码均通过验证）
Ajax概要：Ajax不是个全新的技术，它是多种技术合并在⼀起产⽣的，包括XHTML，CSS，JavaScript，XmlHttpRequest，XML，JSON，DOM等优点：（这也解释了为何我们需要Ajax技术）传统页⾯被点击将与服务器通信后将刷新整个页⾯。⽤Ajax只需刷新局部，⽽且如果数据在本地，根本不必和服务器通信。缺点：
Ajax整合了⼤量技术，因此可能会有浏览器兼容性问题，如果该浏览器不⽀持某项技术，就可能导致运⾏失败，因此⼀定要多浏览器测试。步骤：⽤传统JavaScript⽅式开发个使⽤Ajax技术的web页⾯的话可细分为以下5个步骤：Step1：编写HTML和CSS来布局页⾯Step2：编写⼀个函数初始化页⾯Step3：编写⼀个函数创建请求对象Step4：从服务器得到数据
Step5：在页⾯上更新显⽰现在很多库（如jQuery，Backbone）都提供了便利的ajax函数供使⽤，但究其本质就是将上述步骤3进⾏封装，以简化代码开发Step1详解：（编写HTML和CSS来布局页⾯）（该步骤需要有HTML和CSS知识储备，⾮本⽂详解内容）⽤HTML和CSS先编写个静态页⾯，页⾯内有个⽤户名控件：我们希望在输⼊完⽤户名后，Textbox失去焦点后，就⾃动将⽤户名发送到服务器端去验证。如果是验证结果失败（如该⽤户名已被注册）则Textbox右侧显⽰个叉图标。如果验证结果成功，Textbox右侧显⽰个勾图标。Step2详解：（编写⼀个函数初始化页⾯）HTML⾥加载js⽂件（如my_）js⽂件⾥需要使BOM的window对象在加载页⾯时对页⾯先初始化（类似jQuery的$(document).ready(function(){...}） = initPage;
function initPage() { mentById("username").onblur = checkUsername; //⽤户名失去焦点时触发回调函数}function checkUsername() { //检查⽤户名的回调函数暂时TBD alert("Username lose focus");}输⼊好⽤户名后，离开Textbox将弹出警告框Step3详解：（编写⼀个函数创建请求对象）function createRequest() { try { request = new XMLHttpRequest(); } catch (tryMS) { try { request = new ActiveXObject("P");
} catch (otherMS) {
try { request = new ActiveXObject("P"); } catch (failed) { request = null; } } }
return request;}从函数中也可以看出，IE和其他浏览器对请求对象的实现有所不同。甚⾄低版本IE和IE7以上版本的请求对象的实现亦不同。因此要对IE和⾮IE区别实现才能全浏览器适⽤。有了请求对象之后就可以完成步骤2⾥的检查⽤户名的回调函数了：function checkUsername() { request = createRequest(); //new⼀个请求对象 if (request == null) alert("Unable to create request"); else { var username = escape(mentById("username").value); //获取页⾯上⽤户输⼊的⽤户名 var url= "?username=" + username; //将⽤户名作为URL的⼀部分（因⽤Get⽽⾮Post⽅式）传给服务器端验证脚本 ystatechange = showUsernameStatus; //注册回调函数，服务器端验证完毕后会调⽤该函数 ("GET", url, true); //⽤Get⽽⾮Post⽅式发送请求给服务器，true表⽰异步 (null); //不需要额外的参数，如⽤Post⽅式需要传递参数 }}function showUsernameStatus() { //服务器端验证完毕后调⽤该回调函数，暂时TBD alert("Call Web Server success");}服务器端新建验证⽤户名的PHP脚本，如该⽤户名已注册可返回denied，未注册可返回okay。PHP⾮本⽂内容不详解。Step4详解：（从服务器得到数据）如果你顺利做到Step3，会发现⽤户名Textbox失去焦点后，弹了5次”Call Web Server success“警告框。因为服务器收到请求对象后会将请求对象的readyState属性从0~4依次返回，共返回5次。请求对象的各属性详解：readyState属性：0表⽰连接尚未初始化，1表⽰连接初始化了，2表⽰请求正在处理，3表⽰得到服务器响应，4表⽰服务器处理完请求。state属性：服务器返回的⼀个HTTP状态码，如 == 200表⽰成功，404表⽰没找到responseXML属性：服务器返回的XML格式的信息，如果返回的⾮XML格式的信息该值为空statusText属性：如有问题，可从这个属性得到问题的描述responseText属性：服务器返回的⽂本信息，如果返回的⾮⽂本格式信息该值为空onreadystatechange属性：回调函数function showUsernameStatus() { //Step3⾥创建的回调函数 if (tate == 4 && == 200) { //请求处理成功处理完毕 if (seText == "okay") { //Step3⾥的PHP⾥验证成功将返回字符串okay alert("username OK"); } else { alert("username has been registed"); } }}Step5详解：（在页⾯上更新显⽰）将Step4⾥的回调函数根据业务需要补充完整：function showUsernameStatus() { if (tate == 4 && == 200) { if (seText == "okay") { mentById("username").className = "approved"; mentById("register").disabled = false; } else { mentById("username").className = "denied"; mentById("username").focus(); mentById("username").select(); mentById("register").disabled = true; } }}如果服务器端PHP返回okay，则将⽤户名Textbox的CSS式样更新为approved。CSS式样中会在Textbox右侧显⽰勾图⽚：如果服务器端PHP返回denied，则将⽤户名Textbox的CSS式样更新为denied。CSS式样中会在Textbox右侧显⽰叉图⽚：总结：传统页⾯只能和服务器同步交互。即发出请求后，在得到服务器响应前页⾯将呈现“僵死”状态，⽤户体验很糟糕。得到服务器响应后，需要刷新全页⾯，速度也⽐较慢。⽽Ajax技术使得页⾯能够和服务器异步交互。即发出请求后，在得到服务器响应前页⾯仍能被⽤户正常使⽤。得到服务器响应后，也只需要刷新局部页⾯即可。数据碎⽚化，速度快。另外jQuery库中除了提供ajax⽅法外，还提供get，getJSON，getScript，post，load⼏个快捷⽅式，它们最终都将调⽤ajax⽅法。
2023年6月21日发(作者：)
Ajax技术介绍（本⽂内容参照了Headerfist-Ajax和w3schools，所有代码均通过验证）
Ajax概要：Ajax不是个全新的技术，它是多种技术合并在⼀起产⽣的，包括XHTML，CSS，JavaScript，XmlHttpRequest，XML，JSON，DOM等优点：（这也解释了为何我们需要Ajax技术）传统页⾯被点击将与服务器通信后将刷新整个页⾯。⽤Ajax只需刷新局部，⽽且如果数据在本地，根本不必和服务器通信。缺点：
Ajax整合了⼤量技术，因此可能会有浏览器兼容性问题，如果该浏览器不⽀持某项技术，就可能导致运⾏失败，因此⼀定要多浏览器测试。步骤：⽤传统JavaScript⽅式开发个使⽤Ajax技术的web页⾯的话可细分为以下5个步骤：Step1：编写HTML和CSS来布局页⾯Step2：编写⼀个函数初始化页⾯Step3：编写⼀个函数创建请求对象Step4：从服务器得到数据
Step5：在页⾯上更新显⽰现在很多库（如jQuery，Backbone）都提供了便利的ajax函数供使⽤，但究其本质就是将上述步骤3进⾏封装，以简化代码开发Step1详解：（编写HTML和CSS来布局页⾯）（该步骤需要有HTML和CSS知识储备，⾮本⽂详解内容）⽤HTML和CSS先编写个静态页⾯，页⾯内有个⽤户名控件：我们希望在输⼊完⽤户名后，Textbox失去焦点后，就⾃动将⽤户名发送到服务器端去验证。如果是验证结果失败（如该⽤户名已被注册）则Textbox右侧显⽰个叉图标。如果验证结果成功，Textbox右侧显⽰个勾图标。Step2详解：（编写⼀个函数初始化页⾯）HTML⾥加载js⽂件（如my_）js⽂件⾥需要使BOM的window对象在加载页⾯时对页⾯先初始化（类似jQuery的$(document).ready(function(){...}） = initPage;
function initPage() { mentById("username").onblur = checkUsername; //⽤户名失去焦点时触发回调函数}function checkUsername() { //检查⽤户名的回调函数暂时TBD alert("Username lose focus");}输⼊好⽤户名后，离开Textbox将弹出警告框Step3详解：（编写⼀个函数创建请求对象）function createRequest() { try { request = new XMLHttpRequest(); } catch (tryMS) { try { request = new ActiveXObject("P");
} catch (otherMS) {
try { request = new ActiveXObject("P"); } catch (failed) { request = null; } } }
return request;}从函数中也可以看出，IE和其他浏览器对请求对象的实现有所不同。甚⾄低版本IE和IE7以上版本的请求对象的实现亦不同。因此要对IE和⾮IE区别实现才能全浏览器适⽤。有了请求对象之后就可以完成步骤2⾥的检查⽤户名的回调函数了：function checkUsername() { request = createRequest(); //new⼀个请求对象 if (request == null) alert("Unable to create request"); else { var username = escape(mentById("username").value); //获取页⾯上⽤户输⼊的⽤户名 var url= "?username=" + username; //将⽤户名作为URL的⼀部分（因⽤Get⽽⾮Post⽅式）传给服务器端验证脚本 ystatechange = showUsernameStatus; //注册回调函数，服务器端验证完毕后会调⽤该函数 ("GET", url, true); //⽤Get⽽⾮Post⽅式发送请求给服务器，true表⽰异步 (null); //不需要额外的参数，如⽤Post⽅式需要传递参数 }}function showUsernameStatus() { //服务器端验证完毕后调⽤该回调函数，暂时TBD alert("Call Web Server success");}服务器端新建验证⽤户名的PHP脚本，如该⽤户名已注册可返回denied，未注册可返回okay。PHP⾮本⽂内容不详解。Step4详解：（从服务器得到数据）如果你顺利做到Step3，会发现⽤户名Textbox失去焦点后，弹了5次”Call Web Server success“警告框。因为服务器收到请求对象后会将请求对象的readyState属性从0~4依次返回，共返回5次。请求对象的各属性详解：readyState属性：0表⽰连接尚未初始化，1表⽰连接初始化了，2表⽰请求正在处理，3表⽰得到服务器响应，4表⽰服务器处理完请求。state属性：服务器返回的⼀个HTTP状态码，如 == 200表⽰成功，404表⽰没找到responseXML属性：服务器返回的XML格式的信息，如果返回的⾮XML格式的信息该值为空statusText属性：如有问题，可从这个属性得到问题的描述responseText属性：服务器返回的⽂本信息，如果返回的⾮⽂本格式信息该值为空onreadystatechange属性：回调函数function showUsernameStatus() { //Step3⾥创建的回调函数 if (tate == 4 && == 200) { //请求处理成功处理完毕 if (seText == "okay") { //Step3⾥的PHP⾥验证成功将返回字符串okay alert("username OK"); } else { alert("username has been registed"); } }}Step5详解：（在页⾯上更新显⽰）将Step4⾥的回调函数根据业务需要补充完整：function showUsernameStatus() { if (tate == 4 && == 200) { if (seText == "okay") { mentById("username").className = "approved"; mentById("register").disabled = false; } else { mentById("username").className = "denied"; mentById("username").focus(); mentById("username").select(); mentById("register").disabled = true; } }}如果服务器端PHP返回okay，则将⽤户名Textbox的CSS式样更新为approved。CSS式样中会在Textbox右侧显⽰勾图⽚：如果服务器端PHP返回denied，则将⽤户名Textbox的CSS式样更新为denied。CSS式样中会在Textbox右侧显⽰叉图⽚：总结：传统页⾯只能和服务器同步交互。即发出请求后，在得到服务器响应前页⾯将呈现“僵死”状态，⽤户体验很糟糕。得到服务器响应后，需要刷新全页⾯，速度也⽐较慢。⽽Ajax技术使得页⾯能够和服务器异步交互。即发出请求后，在得到服务器响应前页⾯仍能被⽤户正常使⽤。得到服务器响应后，也只需要刷新局部页⾯即可。数据碎⽚化，速度快。另外jQuery库中除了提供ajax⽅法外，还提供get，getJSON，getScript，post，load⼏个快捷⽅式，它们最终都将调⽤ajax⽅法。
发布评论