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 ,如需转载请自行联系原作者
相关文章
|
11月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
130 0
|
5月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
121 3
|
5月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
120 1
|
6月前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
在Web开发领域,AJAX与Fetch API是提升交互体验的关键技术。AJAX(Asynchronous JavaScript and XML)作为异步通信的先驱,通过XMLHttpRequest对象实现了局部页面更新,提升了应用流畅度。Fetch API则以更现代、简洁的方式处理HTTP请求,基于Promises提供了丰富的功能。当与Python Web框架(如Django、Flask)结合时,这两者能显著增强应用的响应速度和用户体验,使项目更加高效、高大上。
102 2
|
6月前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
82 3
|
6月前
|
前端开发 API 数据格式
颠覆传统!AJAX、Fetch API与Python后端,开启Web开发新篇章!
在Web开发领域,技术的快速迭代推动着应用不断进化。传统前后端交互方式已无法满足现代Web应用对高效、实时性和用户体验的需求。AJAX作为异步通信的先驱,使页面无需刷新即可更新部分内容,显著提升用户体验;尽管XML曾是其主要数据格式,但如今JSON已成为主流。Fetch API则以其简洁、灵活的特点成为AJAX的现代替代品,基于Promises的异步请求让开发更加高效。与此同时,Python后端凭借高效稳定和丰富的库支持,成为众多开发者的首选,无论是轻量级的Flask还是全功能的Django,都能为Web应用提供强大的支撑。
72 0
|
6月前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
79 0
|
8月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
116 3
|
8月前
|
前端开发 Java UED
告别页面刷新时代:Struts 2 Ajax技术揭秘,轻松实现动态加载,Web应用焕然一新!
【8月更文挑战第31天】在Web应用开发中,用户体验至关重要。为减少页面刷新带来的不适,Ajax技术应运而生。Struts 2作为流行的Java EE框架,通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式,展示了Struts 2如何轻松实现Ajax功能,提升了用户体验和开发效率,并灵活地实现了数据交换。然而,使用Ajax时还需注意SEO和跨域请求等局限性。
71 0