1 Ajax是什么

1.1 Asynchronous JavaScript and XML(异步的javascript和xml)

实质为:使用浏览器内置的一个对象(XmlHttpRequest)向服务器发送请求,服务器返回xml数据或文本数据给浏览器,然后在浏览器端,使用这些数据更新部分页面,在整个过程中,页面无任何刷新。

1.2 传统的等待—响应—等待

在传统的web应用中,比如注册,用户填写整个注册表单后提交,此时浏览器会将整个注册页面抛弃,等待服务器返回一个新的完整的页面。在等待过程中,用户不能够做其他操作。服务器生成新的页面发送给浏览器,浏览器需要重新解析这个页面生成相应的页面。

1.3 图示

① Ajax引擎(即XmlHttpRequest对象),首先为该对象注册一个监听器(该监听器是一个事件处理函数,对状态改变事件(readyStatechange)进行监听)

② 当用户对GUI做了某种操作(将产生对应的事件,如焦点失去事件等)

③ 一旦产生对应的事件,将触发事件处理代码

④ 在执行事件处理代码时,会调用Ajax引擎(XmlHttpRequest对象)

⑤ 发送请求:Ajax引擎被调用后,将独自向服务器发送请求(独立于浏览器之外)

  继续其他操作:在Ajax引擎发送请求的同时,用户在浏览器还可以对GUI继续做其他操作,该请求是异步请求(Ajax引擎发送请求时,没有打断用户的操作)

⑥ 服务器的web组件对请求进行处理

⑦ 服务器可能会调用到数据库或者处理业务逻辑的Java类

⑧ 服务器将处理结果响应给(只返回部分数据,可以是xml或者文本)Ajax引擎

⑨ 监听器通过Ajax引擎获取响应数据(xml或者文本)

⑩ 监听器对GUI中的数据进行更新(局部更新,不是整个页面刷新)

整个过程中大部分是通过JS实现的,响应数据可能是xml,所以Ajax可以看做是多种技术的融合。

2 Ajax编程

第一步 获得XmlHttpRequest对象

该对象由浏览器提供,但是该类型并没有标准化。

ie和其他浏览器不同,其他浏览器都支持该类型,而ie不支持。

    function getXmlHttpRequest(){
var xhr = null;
if((typeof XMLHttpRequest) != 'undefined'){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiceXObject(Microsoft.XMLHttp);
}
return xhr;
}

第二步 使用XmlHttpRequest向服务器发请求

a. 发送get请求

function change(v1) {
var xhr = getXmlHttpRequest();
/*open(请求方式,请求地址,同步/异步)
请求方式:get/post
请求地址:如果是get请求,请求参数添加到地址之后
比如 get_comments.do?name=QQ
同步/异步:true表示异步
*/
xhr.open("get", encodeURI("get_comments.do?name=" + v1), true);
/*注册一个监听器(即当xhr的状态发生改变产生了readystatechange事件,
该事件会由一个函数f1来进行处理,这个函数里需要获得服务器返回的数据,
然后更新页面)
*/
xhr.onreadystatechange = f1;
/*只有调用send方法之后,请求才会真正发送*/
xhr.send(null);
}

b. 发送post请求

function change2(v1){
var xhr = getXmlHttpRequest();
xhr.open("post","get_comments.do",true);
//必须添加一个消息头 content-type
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange = f1; xhr.send("name=" + v1);
}

第三步  在服务器端处理请求

第四步 在监听器当中,处理服务器返回的响应

    xhr.onreadystatechange = f1;

    function f1(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
document.getElementById("d1").innerHTML = txt;
}
}

或者

    xhr.onreadystatechange =function(){
//编写相应的处理代码
if(xhr.readyState == 4){
//只有readyState等于4,xhr才完整地接收到了服务器返回的数据
//获得文本数据
var txt = xhr.responseText;
//获得一个xml dom 对象
var xml = xhr.responseXML;
//dom操作 更新页面
document.getElementById("d1").innerHTML = txt;
}
}

关于Ajax的其他应用,可以参考网盘文件。

(1)关于get请求中,ie浏览器的缓存功能,使得并非每一次触发事件都发起请求的问题的解决

(2)关于get请求和post请求中,包含中文时的编码问题解决等。

Ajax的用法的更多相关文章

  1. Ajax.ActionLink 用法

    Ajax.ActionLink 用法 Ajax 属性的ActionLink方法可以创建一个具有异步行为的锚标签. ActionLink方法的第一个参数指定了链接文本,第二个参数是要异步调用的操作的名称 ...

  2. MVC学习十二:Ajax.ActionLink用法

    Ajax.ActionLink用法 <!--使用Ajax.BeginForm必须引用的js文件--> <script type="text/javascript" ...

  3. 关于Jquery Ajax的用法

    今天简单描述一下Jquery Ajax的用法,和我在使用过程中的一些看法,仅供自己娱乐和大家参考值之用! Jquery Ajax的重要性不言而喻,只从Jquery面世之后,终于解救了像我这种既做前台又 ...

  4. js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据)

    js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...

  5. ajax和springmvc的请求响应原理——深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    1,四大重要部分: 请求链接 post请求和get请求 请求参数形式 响应内容形式 2,从springmvc的controller角度,controller能接收到请求的前提 请求链接必须对应 pos ...

  6. 深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问 ...

  7. 详细解读Jquery的$.get(),$.post(),$.ajax(),$.getJSON()用法

    一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第 ...

  8. jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 一.jQuery中调用ajax的4种方法:$.get.$.post.$ge ...

  9. 理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    ajax的4种方法:$.get.$.post.$getJSON.$ajax. 1.$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] ...

  10. ajax实战用法详解

    谦虚使人进步,总结使人提高! 以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax() 1.load(url,[data],[callback])载入远 ...

随机推荐

  1. vue-infinite-loading2.0 中文文档

    简介 这是一个使用在Vue.js中的无限滚动插件,它可以帮助你快速创建一个无限滚动列表. 特点 移动端支持友好 兼容任何一个可以滚动的元素 有不同的旋转器可以作为加载动画 支持加载后显示结果 支持两个 ...

  2. ubuntu 18.04 设置固定ip

    # This file is generated from information provided by # the datasource.  Changes to it will not pers ...

  3. Vue中改变对象的注意事项

    数组更改注意事项 Vue无法检测到以下方式变动的数组 当你利用索引直接设置一个项时,例如:vm.items[index] = newValue 当你修改数组的长度时,例如:vm.items.lengt ...

  4. HTML:target=_blank、target=_top、target=_parent、target=_self 的区别

    HTML:target=_blank.target=_top.target=_parent.target=_self 的区别 _blank 在新窗口中打开链接_parent 在父窗体中打开链接_sel ...

  5. 关于Mysql数据库的知识总结

    2017年6月8日,天气阴.心情晴. 连续做梦两个晚上了,昨晚竟然梦见一个很长时间不联系的初中同学了,早上上班的路上聊了聊.女孩现在出差在贵州,风景秀美的地方.我说“你现在生活很滋润”.女孩说“那是你 ...

  6. X86和X64环境下的基本类型所占用的字节大小

    同样的程序代码,使用Visual Studio 进行编译,当目标平台分别为x86或x64环境时,其编译结果是不同的.在x86环境下,指针都是4个字节的:而在x64环境下,指针都是8字节的.测试代码如下 ...

  7. Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  8. ecsop文件结构

    Ecshop文件结构 :ecshop二次开发手册,ECSHOP文件结构,ECSHOP目录详解 /*ECShop 最新程序 的结构图及各文件相应功能介绍ECShop文件结构目录┣ activity.ph ...

  9. systemd-analyze – 在Linux中查找系统启动性能统计信息

    您是否在使用 systemd 系统和服务管理器,并且您的 Linux 系统需要较长时间才能启动,或者您希望查看系统启动性能的报告? 如果是的话,你已经登陆了正确的地方. 在本文中,我们将向您展示如何使 ...

  10. 华为MSTP负载均衡配置示例

    以下内容摘自由华为公司授权并审核通过,今年元月刚刚出版上市的<华为交换机学习指南>一书:http://item.jd.com/11355972.html,http://product.da ...