发表于: 2017-03-28 22:21:17
2 1125
今天完成的事情:
阅读书籍,学习了原生Js的Ajax技术的运用方法,对Ajax的优势和缺点以及适用范围等进行了了解。
明天计划的事情:
继续看书,学习下HTTP协议方面的知识,参考其他人做的Ajax的demo对照书上的内容看看Ajax的实际运用中还有那些需要注意的问题。
遇到的问题:
关于HTTP部分的内容所知不多,HTTP协议本身并不复杂,理解起来也不会花费太多学习成本,但纯概念式的学习稍显单调,对人的抽象思维能力有一定的要求,然而如果我们想在专业道路上走的更加坚实,就绝对不能绕开学习HTTP协议这一环节。对基础及核心部分的深入学习是成为一名专业技术人员的前提。
收获:
Ajax用于概括异步加载页面内容的技术,主要优势为对服务器的请求以异步方式发送到服务器,服务器不会用整个页面来响应请求,它会在后台处理请求,与此同时,用户还能继续浏览页面并与页面交互。
通过利用Ajax,Web应用可以呈现出功能丰富、交互敏捷、类似桌面应用般的体验。
Ajax依赖Js,所以可能有些浏览器不支持它,而搜索引擎的蜘蛛程序也不会抓取到有关内容。
Ajax的缺点是虽然可以减少重复加载页面的次数,但缺少状态记录,这会与浏览器的一些惯例产生冲突,比如后退按钮和为特定页面添加书签。
Ajax技术的核心是XMLHttpRequest对象。这个对象充当着脚本与服务器间的中间人的角色。
不同浏览器实现XMLHttpRequest对象的方式不太一样。
XMLHttpRequest对象有许多方法,最有用的是open方法,可以用来指定服务器上将要访问的文件,指定请求类型:GET、POST或SEND,指定请求是否以异步方式发送和处理。
onreadystatechange是一个事件处理函数,它会在服务器给XMLHttpRequest对象送回响应时被触发执行。
服务器向XMLHttp对象发回响应时,浏览器会在不同阶段更新readyState属性的值,0表示未初始化,1表示正在加载,2表示加载完毕,3表示正在交互,4表示完成。若readyState的属性值为4,就可以访问服务器发送回来的数据了,之后可以从responseText属性里取得文本数据。
var request = new XMLHttpRequest();
if(request){
request.open("GET","example.tex",true); //指定请求目标
request.onreadystatechange = function() { //明确如何处理响应
if(reqeust.readyState == 4) {
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById('new').appendChild(para);
}
};
request.send(null);
}
评论