大家好,今天我来给大家详细说说ajax的神奇之处!
同步请求和异步请求
先解释一下同步和异步的概念:
同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
同步请求:
客户端请求(等待)->服务端处理->响应->页面载入 (缺少对象:XMLhttpRequest)
这时候如果有错误,只能再次发送请求,再次等待
异步请求:
比如当你填写邮箱地址的时候,页面当时就把邮箱地址发送到了服务器(也就是页面发送了一个请求),服务器做处理和响应,得到你的邮箱地址填写重复了,把响应结果发给页面,在这个过程中你仍然可以填写其他内容,这时候服务器会提示你有重复的邮箱地址,在页面上的表现只是邮箱地址旁别加了一行字或者把整个文本框标红,并没有重新刷你的页面,所有的填写错误会实时的显示出来,你也会实时的更正。这个过程中,你会有整个页面的刷新,也不会有整个页面的提交和等待,最后提交,一切都会搞定的
总结:页面上的操作和服务器端的操作互相之间不会造成阻塞
二、http是计算机通过网络进行通信的规则
1 - 作用:客户端向服务端发送请求信息和服务
*客户端:自己的计算机的浏览器(web浏览器)
*服务端:服务器,一台高性能的计算机,作为存储,处理网络上的数据,信息(web服务器)
服务器指一个管理资源并为用户提供服务的计算机软件,通常分为文件服务器、数据库服务器和应用程序服务器。运行以上软件的计算机或计算机系统也被称为服务器。
2 - 特点:是一种无状态的协议(不建立持久的连接,服务端不保留连接的信息)
3 . 一个完整的HTTP请求过程的七个步骤:
建立TCP连接
web浏览器向web服务器发送请求命令
web浏览器发送请求头信息
web服务器应答
web服务器发送应答头信息
web服务器向浏览器发送数据
web服务器关闭TCP连接
4 - HTTP请求的四部分组成:
1.HTTP请求的方法或动作,比如GET还是POST
2.正在请求的URL,总得知道请求的地址是什么
3.请求头,包含一些客户端环境信息,身份验证信息等
4.请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等等;
5 - HTTP请求方法
*GET:一般用于信息获取,用get请求-->查询或获取的操作
使用URL传递参数
对所发送信息的数量有限制,一般在2000个字
*POST:
一般用于修改服务器上的数据.比如:新建,修改,删除,发送表单数据
对所发送信息的数量无限制
6 - HTTP响应一般由三部分组成:
1.一个数字和文字组成的状态码,用来显示请求是成功还是失败
2.响应头:响应头也和请求头一样包含许多有用的信息,例如
服务器类型,日期时间,内容类型和长度等
3.响应体,也就是响应正文
7 - HTTP状态码
100:信息类,表示web浏览器请求,正在进一步的处理中
200:成功,表示用户请求被正确接收正在进一步的处理中 200 OK
300:表示请求没有成功,客户端必须采取进一步的动作
400:客户端错误,表示客户端提交的请求有错误 例如:404 NOT Found,意味着
请求中所引用的文档不存在
500:服务器错误 表示服务器不能完成对请求的处理,如500
一、什么是Ajax
AJAX即“Asynchronous Javascript And XML”( 异步 JavaScript和XML),
是异步无刷新读取数据
AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
它是一套综合了多项技术的浏览器端网页开发技术。
这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
二、Ajax原理
运用HTML和css来实现页面,表达信息
通过浏览器的XmlHttpRequest(Ajax引擎)对象
来向服务器(发送异步请求)并(接收服务器)的响应数据,
然后用javascript来操作DOM,实现动态局部刷新。
三、Ajax实现过程
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器(打开和服务器的连接)
oAjax.open('GET', url, true);
//3.发送
oAjax.send();
//4.接收
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
//alert('成功了:'+oAjax.responseText);
fnSucc(oAjax.responseText);
}
else
{
//alert('失败了');
if(fnFaild)
{
fnFaild();
}
}
}
};
}
四、详解Ajax引擎的状态属性 readyState(0 1 2 3 4)
0 - (未初始化)还没有调用open()方法
1 - (载入)已调用open()方法,正在发送请求
2 - (载入完成)open()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
五、为什么使用Ajax?
优点:
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。
这使得Web应用程序更为迅捷地响应用户动作,并避免了在网络上发送那些没有改变的html代码信息。
1.减轻服务器负担,按需要获得数据。
2.无刷新更新页面,减少用户的实际和心理的等待时间。
3.更好的用户体验。
4.减轻宽带的负担。
5.主流浏览器支持
缺点:
1.AJAX的程序必须测试针对各个浏览器的兼容性。
2.AJAX更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能是失效的;需提醒用户
3.对搜索引擎支持不好。
OK,今天小鱼儿课堂就到这里了,希望对大家有帮助!
非常感谢一直关注我的朋友们,我也会尽我所能给大家分享更多的知识点,希望大家多多阅读,文章若有不妥的地方请大家多多指教~~