AJAX入门学习-1:理解ajax

小生博客:http://xsboke.blog.51cto.com

如果有疑问,请点击此处,然后发表评论交流,作者会及时回复。

                        -------谢谢您的参考,如有疑问,欢迎交流


一. 什么是ajax

    ajax:asynchronous javascript and xml,异步javascript和xml,即使用javascript语言与服务器进行异步交互,传输的数据库为
    xml(当然,传输数据的不只是xml)

    ajax还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新,这一特点给用户的感受是在
    不知不觉中完成请求和响应过程

    - 与服务器异步交互
    - 浏览器页面局部刷新

二. 同步交互与异步交互

    - 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求
    - 异步交互:客户端发出一个请求后,无等待服务器响应结束后,就可以发出第二个请求

三. 局部刷新

    比如百度的搜索框,输入一个字,百度会自动联想你想搜索的东西,这时候页面并没有刷新,这就是局部刷新
    比如,在某些网站注册用户时,会提示用户名被占用,这是因为当你输入完,焦点移出输入框时,就会从数据库验证用户是否存在

四. ajax的优缺点
4.1 优点

        - ajax使用javascript技术向服务器发送异步请求;
        - ajax无需刷新整个页面;
        - 因为服务器响应内容不再是整个页面,而是页面中的局部,所以ajax性能更高

4.2 缺点

        - ajax并不适合所有场景,很多时候还是要使用同步交互
        - ajax虽然提高了用户体验,但是无形中向服务器发送的请求次数增多,导致服务器压力增大
        - 因为ajax是在浏览器中使用javascript技术完成的,所以还需要处理浏览器兼容性问题

五. ajax使用流程
5.1 四步操作:

        - 创建核心对象
        - 使用核心对象打开与服务器的连接
        - 发送请求
        - 注册监听,监听服务器响应

5.2 xmlhttprequest

        - open(请求方式,URL,是否异步)
        - send(请求体)
        - onreadystatechange,指定监听函数,他会在xmlhttp对象的状态发生变化时被调用
        - readystate,当前xmlhttp对象的状态,其中4状态表示服务器响应结束
        - status,服务器响应的状态码,只有服务器响应结束时才会有,200表示响应成功
        - responseText,获取服务器的响应体

原文地址:http://blog.51cto.com/xsboke/2350261

时间: 2024-08-02 11:00:31

AJAX入门学习-1:理解ajax的相关文章

Ajax入门学习原始代码

<script type="text/javascript">        window.onload = function () {            //1.创建xmlhttprequest对象            var xhr = createXHR();            function createXHR() {//为了兼容新老IE的版本                var request;                if (typeof(X

Ajax入门介绍以及用Ajax写helloworld

1:  Ajax被认为是(Asynchronous  JavaScript and XML的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. Ajax:一种不用刷新整个页面便可与服务器通讯的办法 2:用ajax编写一个helloworld的小程序,在超链接中弹出文本框中的内容. <script type="text/javascript"> window.onload=function(){ //1:获取a节点,并对其添加onclick()相应

AJAX入门学习-2:基于JS的AJAX实现(以Django为例)

小生博客:http://xsboke.blog.51cto.com 如果有疑问,请点击此处,然后发表评论交流,作者会及时回复. -------谢谢您的参考,如有疑问,欢迎交流 一. ajax的实现操作流程 实例对象: var xmlhttp = XMLHttprequest() 连接server端: xmlhttp.open("") 发送数据: xmlhttp.send("") # 请求体的内容 ,如果是GET请求就没有内容,内容在URL里面,写为send(null

ajax的学习和运用ajax来验证用户名是否存在的例子

ajax执行的过程: 首先是由JS页面发送一个请求,并且传送一个data数据过去, 交给处理页面来对数据库进行处理,处理完了就返回一个值当作success 方法里面的参数来执行success里面的回调函数. ajax.chuli.web.php后台对数据库处理页面

Egg入门学习(三)---理解中间件作用

Egg是基于koa的,因此Egg的中间件和Koa的中间件是类似的.都是基于洋葱圈模型的. 在Egg中,比如我想禁用某些IP地址来访问我们的网页的时候,在egg.js中我们可以使用中间件来实现这个功能,中间件的作用无非就是说在Egg的外层在包一层来判断某些事情是否符合要求,也就是在洋葱圈模型外面再进行包一层.在Egg入门二学习中(https://www.cnblogs.com/tugenhua0707/p/10226799.html), 我们最后的项目的目录结构如下: egg-demo2 ├──

[AJAX]AJAX的入门学习

AJAX入门 听了方老师的课程,配上了阮一峰阮老师的教程食用,整理记录一些使用AJAX所需的知识点. 什么是AJAX Asynchronous JavaScript and XML 的缩写,指的是通过 JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页. 为什么使用AJAX 首先整理总结一下主要发送HTTP请求的方式及其优缺点 form 可以发请求,但是会刷新页面或新开页面 a可以发 get 请求,但是也会刷新页面或新开页面 i

ASP.NET AJAX入门系列(8):自定义异常处理

ASP.NET AJAX入门系列(8):自定义异常处理 在UpdatePanel控件异步更新时,如果有错误发生,默认情况下会弹出一个Alert对话框显示出错误信息,这对用户来说是不友好的,本文看一下如何在服务端和客户端脚本中自定义异常处理,翻译自官方文档. 主要内容 1.在服务端自定义异常处理 2.在客户端脚本中自定义异常处理 一.在服务端自定义异常处理 1.添加ASPX页面并切换到设计视图. 2.在工具箱中AJAX Extensions标签下双击ScriptManager和UpdatePane

AJAX入门---五步使用XMLHttpRequest对象

XMLHttpRequest简介: XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页.当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据.XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力.XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容.尽管名为 XM

ASP.NET AJAX入门系列(1):概述

经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不继续误导广大朋友,所以不再作为推荐系列文章,如果有需要参考的朋友,可以直接到随笔分类中查看. ASP.NET AJAX Beta改动如此之大,鉴于又没有很好的中文参考资料,所以决定最近开始写作ASP.NET AJAX入门系列,这个系列我会把ASP.NET AJAX当作一个全新的东西去对待,不再考虑以