AJAX  即“Asynchronous JavaScript and XML”(异步的JavaScript 与 XML技术 ),指的是一套综合了多项技术的浏览器端网页开发技术。

所谓为的异步交互:指的就是就是能在不更新整个页面的前提下维护数据

提       出:杰西·詹姆士·贾瑞特

发行时间 :2005年2月18日

程序案例:新浪微博、Google 地图、开心网等等

与传统相比有什么优点:

  传统的web,B/S ,架构,用户提交表单,就像网页服务器发送一个请求。服务器接收并处理传来的表单,送回一个新的网页。

  缺点:浪费宽带(前后两个页面的HTML代码大部分都是相同的),速度慢(数据传递到用户界面靠的是服务器的回应时间)

  AJAX 可以仅向服务器发送并取回必须的数据,并在客户端采用js 处理来自服务器的回应。

优点:服务器回应速度增快(处理的数据量大大减少),服务器负荷减少(很多的处理工作早客户端的机器上完成)

       缺点:可能破坏浏览器的后退与加入收藏书签功能,浏览器的兼容性问题

注意:

  AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术
  虽然其名称包含XML,但实际上数据格式可以由JSON代替,进一步减少数据量,形成所谓的AJAJ。
  一些基于AJAX的“派生/合成”式(derivative/composite)的技术也正在出现,如AFLAX

方式:

实现步奏:

  1、创建XMLHttpRequest  对象

  2、设置响应函数

  3、设置访问接缪按

  4、发送请求

  5、当服务端的响应返回,响应函数被调用

  6、在响应函数中,判断响应是否成功,如果成功获取服务端返回文本,并显示

XMlHttpRequest

用在后台与服务器交换数据。意为着可以在不重新加载整个网页的情况下,对网页的某部分进行刷新

创建XHR对象 语法:

variable= new XMLHttpRequest();

XMLHttpRequest 对象有三个重要的属性:

设置响应函数

XMLHttpRequest 作用是和服务器进行交互,所以既会发消息给服务器,也能接收服务器的响应

当服务器做出响应的时候,通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。

发出请求

通过open函数设置背后的这个小线程,将要访问的页面url

xmlhttp.open("GET",url,true);

通过send函数进行实际的访问

xmlhttp.send(null);

null表示没有参数,因为参数已经通过“GET" 方式,放在url里了。
只有在用"POST",并且需要发送参数的时候,才会使用到send。
类似这样:
xmlhttp.send("user="+username+"&password="+password)

处理回应的信息

在checkResult 函数中处理响应

function checkResult(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}

xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本

代码:

AJAX -------------- 如何使用ajax的更多相关文章

  1. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

  2. JQuery 插件之Ajax Autocomplete(ajax自动完成)搜索引擎自动显示下拉框

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  3. AJAX编程-封装ajax工具函数

    即 Asynchronous [e'sɪŋkrənəs] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器 ...

  4. Ajax、反向Ajax和WebSocket 概念

    Ajax 异步的JavaScript和XML(Asynchronous JavaScript and XML,Ajax),一种可通过JavaScript来访问的浏览器功能特性,其允许脚本向幕后的网站发 ...

  5. AJAX和jQuery Ajax总结

    AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...

  6. AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?

      AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...

  7. zepto源码研究 - ajax.js($.ajax具体流程分析)

    简要:$.ajax是zepto发送请求的核心方法,$.get,$.post,$.jsonp都是封装了$.ajax方法.$.ajax将jsonp与异步请求的代码格式统一起来,内部主要是先处理url,数据 ...

  8. aJax学习之Ajax工作原理

    转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的 ...

  9. JQuery 插件之Ajax Autocomplete(ajax自动完成)

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  10. Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法

    1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完 ...

随机推荐

  1. Python中的函数(高级使用)

    一.将函数作为变量去使用 在Python中函数也是一种对象,是一种名为function的对象,所以可以将函数赋值给变量,类似整数.浮点数.列表.元组.字典赋值给变量. 我们编写如下程序: #codin ...

  2. rabbitMQ基础应用

    1.安装erlang [root@localhost ~]#yum -y install erlang 2.安装rabbitMQ [root@localhost ~]#yum -y install r ...

  3. redis的两种持久化方案

    前言 人生在于折腾系列,网络,多线程等系列博客楼主还在继续折腾也不会放弃.缓存的知识其实并不仅仅在于简单的增删改查,我觉得有必要全面深入的学习一波.记录学习的过程与体悟. RDB 什么是RDB 对re ...

  4. 同一个POD中默认共享哪些名称空间

    如果通过POD的形式来启动多个容器那么它们的名称空间会是共享的么,所以我这里讨论是在默认情况下同一个POD的不同容器的哪些名称空间是打通的.这里先说一下结论,共享的是UTS.IPC.NET.USER. ...

  5. CRM product model的用法

    User scenario An example from sap help For a car, the interior, the engine capacity, and the exterio ...

  6. 【spring data jpa】带有条件的查询后分页和不带条件查询后分页实现

    一.不带有动态条件的查询 分页的实现 实例代码: controller:返回的是Page<>对象 @Controller @RequestMapping(value = "/eg ...

  7. 简要分析一下java中线程的生命周期

    面试题:您了解线程吗?简单叙述一下线程的生命周期? 答:之前学过一些有关于线程方面的知识,并且在编写代码的过程中还是要经常考虑线程,所以,我对线程还是了解一点的. 首先,创建一个线程,线程进入初始状态 ...

  8. (原)pytorch中使用TensorRT

    转载请注明出处: https://www.cnblogs.com/darkknightzh/p/11332155.html 代码网址: https://github.com/darkknightzh/ ...

  9. linux系统最大TCP连接数限制

    2017-12-28 17:48:21 chenlin465373800 阅读数 16189    不太对 本博客为转载,原文请参见<a href="http://blog.51cto ...

  10. 性能测试基础---jmeter入门

    ·Jmeter入门 ·Jmeter的简介: ·Jmeter是一款基于纯JAVA语言开发的开源的性能测试工具. ·Jmeter的下载: ·最新版:http://jmeter.apache.org/dow ...