Web:AJAX的详解

简介:

Web中的AJAX技术:

1、介绍:
全称:Asnchronous JavaScript and XML,即异步的JavaScript和XML
功能:它不是某种编程语言,是一种无需加载整个网页的情况下能够更新部分网页的技术。
扩展:
  a、传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。
  b、使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。


2、学习AJAX技术需要的基础知识:HTML+CSS+JavaScript

 

3、AJAX-同步和异步

  a.同步:提交表单时,每次填完一个输入框内容,客户端都要向服务端发送请求,服务端收到请求后会对该请进行处理,接着向客户端输出响应,客户端等待响应并重新载入整个页面,如此往复...

  b.异步:提交表单时,每次填完一个输入框内容,客户端都要向服务端发送请求,服务端收到请求后会对该请进行处理,接着向客户端输出响应,客户端验证信息将错误的内容标红但是并没有去载入这个页面,在此过程中,我们还可以去接着去填写其他的输入框内容,直到最后提交载入页面...

  c、异步使用的对象:XMLHttpRequest


4、实现AJAX技术的步骤
  a.运用HTML和CSS来实现页面,表示信息;
  b.运用XMLHttpRequest和web进行数据的异步交换;
  c.运用JavaScript操作DOM,实现动态数据局部刷新。


5、AJAX-XMLHttpRequest对象的创建
  var request = new XMLHttpRequest();
  这个对象的使用除了不兼容IE5/6外,基本涵盖了所有的浏览器,如图所示:

  那么如何兼容IE6或者更早的版本,应该使用下面的这段代码:

复制代码
var request;
  if(window.XMLHttpRequest){
    request = new XMLHttpRequest();
  }else{
    request = new ActiveXObject("Microsoft.XMLHTTP");//IE6/5    
  }
复制代码

 

6、XMLHttpRequest对象创建之后就是请求了,在此之前先具体了解一下HTTP
  a.http是计算机通过网络进行通信的规则
  b.http是一种无状态的协议,客户端首先与服务器建立连接,然后客户端向服务器发送请求,服务器收到请求后处理,处理完后向客户端输出响应信息,客户端收到响应后,它们之间的连接就会断开,在整个过程中,服务器是没有保存记忆的,如果客户端需要新的数据,就必须重新请求。如图所示:


7、HTTP请求的7个具体步骤
  a.建立一个TCP连接
  b.Web浏览器向Web服务器发送请求命令
  c.Web浏览器发送请求头信息
  d.Web服务器应答
  e.Web服务器发送应答头信息
  f.Web服务器向浏览器发送数据
  g.Web服务器关闭TCP连接


8、一个HTTP请求一般由四部分组成
  (1)HTTP请求的方法或动作,比如是GET还是POST请求;
  (2)正在请求的URL,总的知道请求的地址是什么;
  (3)请求头,包含一些客户端环境的信息,身份验证信息等;
  (4)请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等。 
  如下的请求方式

 

        分析:

        请求方式:get     请求地址:login.php   请求协议:HTTP

        中间部分为请求头信息

        最后面的一行为请求正文,也就请求的参数 

 

9、HTTP请求中的GET和POST请求
  * GET:
    a.一般用于信息获取
    b.使用URL传递参数
    c.对所发信息的数量也有限制,一般在2000个字符
  *POST:
    a.一般用于修改服务器上的资源
    b.对所发信息的数量无限制

 

10、一个HTTP响应一般由三部分组成
  (1)一个数字和文字组成的状态码,用来显示请求是成功还是失败
  (2)响应头,响应头也和请求头一样包含许多有用的的信息,例如服务器类型,日期时间,内容类型和长度等。
  (3)响应体,也就是响应正文
  如下的响应方式,如图:

  分析:

         头一行请求状态码:200,表示请求成功  请求协议:HTTP

         剩余部分为响应头信息

 

  如下的状态码,如图:


11、AJAX-XMLHttpRequest发送请求
  方法:
  open(method,url,async)
    *method:请求的方法,get/post
    *url:请求的地址
    *async:请求的方式,同步false/异步true

  setRequestHeader(……):设置头信息

  send(string)
    *string,一般是post请求时要传递的参数,get传null即可

  请求实例如下图:


12、AJAX-XMLHttpRequest取得响应
  属性和方法:
  resposeText:获得字符串形式的响应数据
  resonseXML:获得XML形式的响应数据
  status和statusText:以数字和文本形式返回HTTP状态码

  getAllResponseHeader():获取所有的响应报头
  getResponseHeader("参数"):查询响应中某个字段的值

  readyState属性用监听服务器的处理过程:
    *0:请求为初始化,open还没有调用
    *1:服务器连接已建立,open已经调用
    *2:请求已接收,也就是接收到头信息了
    *3:请求处理中,也就是接收到响应主体了
    *4:请求已完成,且响应已就绪,也就是响应完成了
  监听代码示例如下图:


 13、AJAX进行网络请求还有其他的方式,如$ajax()、$get()、$post()、$load()等,最常用的还是$ajax({……});

具体可以点击这个链接看看我的另一篇:http://www.cnblogs.com/XYQ-208910/p/5903920.html

  

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/5990371.html ,如需转载请自行联系原作者
相关文章
|
4月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
67 0
|
26天前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
42 3
|
14天前
|
前端开发 Java UED
告别页面刷新时代:Struts 2 Ajax技术揭秘,轻松实现动态加载,Web应用焕然一新!
【8月更文挑战第31天】在Web应用开发中,用户体验至关重要。为减少页面刷新带来的不适,Ajax技术应运而生。Struts 2作为流行的Java EE框架,通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式,展示了Struts 2如何轻松实现Ajax功能,提升了用户体验和开发效率,并灵活地实现了数据交换。然而,使用Ajax时还需注意SEO和跨域请求等局限性。
26 0
|
14天前
|
开发者 前端开发 Apache
Apache Wicket Ajax揭秘:轻松几步,让你的Web应用告别“呆板”,焕发新生!
【8月更文挑战第31天】随着互联网技术的发展,Web应用的交互性成为评价网站成功的关键指标。Apache Wicket作为一款卓越的Java Web框架,不仅具备强大的组件化开发能力,还内置了对Ajax技术的支持,使开发者能轻松提升Web应用的交互体验。通过简单的代码示例展示了如何在不刷新页面的情况下异步更新页面元素,极大提升了用户体验。Wicket提供了多种Ajax组件和行为,如AjaxFallbackLink、AjaxButton等,满足不同场景需求,并支持自定义Ajax行为,帮助开发者实现复杂交互效果。合理运用Wicket的Ajax功能,可显著增强网站竞争力。
26 0
|
2月前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
【7月更文挑战第15天】AJAX和Fetch API是Web开发中的关键工具,用于异步前后端交互。AJAX借助XMLHttpRequest实现页面局部更新,而Fetch API是现代的、基于Promise的HTTP请求接口,提供更强大功能和简洁语法。结合Python Web框架如Django或Flask,利用这两者能创造无缝体验,提升项目性能和用户体验。学习并应用这些技术,将使你的Web应用焕发新生。**
42 5
|
2月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
50 7
|
2月前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
【7月更文挑战第13天】构建现代Web应用的关键在于提供无缝用户体验,这涉及AJAX和Fetch API的异步数据交换以及Python(如Flask)的后端支持。Fetch API以其基于Promise的简洁接口,改进了AJAX的复杂性。例如,一个Flask应用可提供用户数据,前端利用Fetch API在不刷新页面的情况下显示信息。这种结合提升了效率,减少了服务器负载,是现代Web开发的趋势。随着技术发展,预期将有更多工具优化这一过程。
52 3
|
2月前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
【7月更文挑战第14天】在Web开发中,AJAX和Fetch API扮演着关键角色,用于前后端异步通信。AJAX通过XMLHttpRequest实现页面局部更新,但回调模式和复杂API有一定局限。Fetch API作为现代替代,利用Promise简化异步处理,提供更丰富功能和错误处理。Python后端如Flask、Django支持这些交互,助力构建高性能应用。从AJAX到Fetch API的进步,结合Python,提升了开发效率和用户体验。
25 0
|
2月前
|
XML 前端开发 API
颠覆传统!AJAX、Fetch API与Python后端,开启Web开发新篇章!
【7月更文挑战第14天】Web开发中,AJAX作为异步通信先驱,与新兴的Fetch API一起革新交互体验。Fetch基于Promise,简化了请求处理。Python后端,如Flask,提供稳定支撑。这三者的融合,推动Web应用达到新高度,实现高效、实时交互。通过示例展示,我们看到从发送请求到更新UI的流畅过程,以及Python如何轻松返回JSON数据。这种组合揭示了现代Web开发的潜力和魅力。
28 0
|
4月前
|
XML 前端开发 JavaScript
CSR(客户端渲染)和AJAX在Web开发中各自扮演不同的角色
【5月更文挑战第8天】CSR(客户端渲染)与AJAX在Web开发中各司其职。CSR提供初始HTML框架,通过JavaScript在浏览器端获取并渲染数据,提升交互性和响应速度。AJAX则实现页面局部更新,如实时搜索,不刷新页面即可获取数据。CSR可能因DOM操作多而引发性能问题,但可优化解决;AJAX适合频繁交互场景,提高响应性。两者在不同需求下各有优势,需按项目选择适用技术。
47 4