ajax简介及JS写原生ajax

ajax

1.什么是ajax
　　ajax 的全称是Asynchronous JavaScript and XML，其中， Asynchronous 是异步的意思,指的是异步 JavaScript 和 XML。
　　AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对的某部分进行更新。
　　传统的网页（不使用AJAX）如果需要更新内容，必需重载整个网页面。

2.ajax所包含的技术
　　大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合⽽成。
　　　　1.使用CSS和XHTML来表示。
　　　　2. 使用DOM模型来交互和动态显示。
　　　　3.使用XMLHttpRequest来和服务器进行异步通信。
　　　　4.使用javascript来绑定和调用。

3.ajax原理
　　Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

4.同步和异步的区别？

同步：阻塞的

　　-张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭

　　=浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面

异步：非阻塞的

　　-张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃

　　=浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

5.ajax请求的实现
　　1.创建XmlHttpRequest对象
　　　　if (window.XMLHttpRequest) {
　　　　　　// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
　　　　　　xmlhttp=new XMLHttpRequest();
　　　　} else {
　　　　　　// IE6, IE5 浏览器执行代码
　　　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
　　　　}
　　2.连接服务器
　　　　xmlhttp.open(“GET","http://127.0.0.1:8080",true);
　　3.发送请求

　　　　xmlhttp.send();
　　4.等待服务器返回内容，并处理
　　　　xmlhttp.onreadystatechange=function() {
　　　　if (xmlhttp.readyState==4 && xmlhttp.status==200) {
　　　　　　document.getElementById("btn").innerHTML=xmlhttp.responseText;
　　　　　　}
　　　　}

6.简介一下ajax的过程

　　1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象

　　2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

　　3. 设置响应HTTP请求状态变化的函数

　　4. 发送HTTP请求

　　5. 获取异步调用返回的数据

　　6. 使用JavaScript和DOM实现局部刷新

7.ajax的优缺点

　　优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验。

　　缺点：不能回退, 对搜索引擎不友好；要实现ajax下的前后退功能成本较大；可能造成请求数的增加跨域问题限制。

巴特西

ajax简介及JS写原生ajax

最新文章

热门文章