AJAX -------------- 如何使用ajax
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的更多相关文章
- 原生Ajax 和Jq Ajax
前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...
- JQuery 插件之Ajax Autocomplete(ajax自动完成)搜索引擎自动显示下拉框
平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...
- AJAX编程-封装ajax工具函数
即 Asynchronous [e'sɪŋkrənəs] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器 ...
- Ajax、反向Ajax和WebSocket 概念
Ajax 异步的JavaScript和XML(Asynchronous JavaScript and XML,Ajax),一种可通过JavaScript来访问的浏览器功能特性,其允许脚本向幕后的网站发 ...
- AJAX和jQuery Ajax总结
AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...
- AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法?
AJAX是什么? AJAX的交互模型(流程)?同步和异步的区别? AJAX跨域的解决办法? 分类: web前端面试题2013-07-20 22:40 630人阅读 评论(0) 收藏 举报 目录(? ...
- zepto源码研究 - ajax.js($.ajax具体流程分析)
简要:$.ajax是zepto发送请求的核心方法,$.get,$.post,$.jsonp都是封装了$.ajax方法.$.ajax将jsonp与异步请求的代码格式统一起来,内部主要是先处理url,数据 ...
- aJax学习之Ajax工作原理
转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的 ...
- JQuery 插件之Ajax Autocomplete(ajax自动完成)
平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...
- Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法
1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完 ...
随机推荐
- Python中的函数(高级使用)
一.将函数作为变量去使用 在Python中函数也是一种对象,是一种名为function的对象,所以可以将函数赋值给变量,类似整数.浮点数.列表.元组.字典赋值给变量. 我们编写如下程序: #codin ...
- rabbitMQ基础应用
1.安装erlang [root@localhost ~]#yum -y install erlang 2.安装rabbitMQ [root@localhost ~]#yum -y install r ...
- redis的两种持久化方案
前言 人生在于折腾系列,网络,多线程等系列博客楼主还在继续折腾也不会放弃.缓存的知识其实并不仅仅在于简单的增删改查,我觉得有必要全面深入的学习一波.记录学习的过程与体悟. RDB 什么是RDB 对re ...
- 同一个POD中默认共享哪些名称空间
如果通过POD的形式来启动多个容器那么它们的名称空间会是共享的么,所以我这里讨论是在默认情况下同一个POD的不同容器的哪些名称空间是打通的.这里先说一下结论,共享的是UTS.IPC.NET.USER. ...
- CRM product model的用法
User scenario An example from sap help For a car, the interior, the engine capacity, and the exterio ...
- 【spring data jpa】带有条件的查询后分页和不带条件查询后分页实现
一.不带有动态条件的查询 分页的实现 实例代码: controller:返回的是Page<>对象 @Controller @RequestMapping(value = "/eg ...
- 简要分析一下java中线程的生命周期
面试题:您了解线程吗?简单叙述一下线程的生命周期? 答:之前学过一些有关于线程方面的知识,并且在编写代码的过程中还是要经常考虑线程,所以,我对线程还是了解一点的. 首先,创建一个线程,线程进入初始状态 ...
- (原)pytorch中使用TensorRT
转载请注明出处: https://www.cnblogs.com/darkknightzh/p/11332155.html 代码网址: https://github.com/darkknightzh/ ...
- linux系统最大TCP连接数限制
2017-12-28 17:48:21 chenlin465373800 阅读数 16189 不太对 本博客为转载,原文请参见<a href="http://blog.51cto ...
- 性能测试基础---jmeter入门
·Jmeter入门 ·Jmeter的简介: ·Jmeter是一款基于纯JAVA语言开发的开源的性能测试工具. ·Jmeter的下载: ·最新版:http://jmeter.apache.org/dow ...