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对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完 ...
随机推荐
- Flask应用启动流程
目录 flask应用启动流程 WSGI 启动流程 flask应用启动流程 WSGI 所有的 python web 框架都要遵循 WSGI 协议 在这里还是要简单回顾一下 WSGI 的核心概念. WSG ...
- 设计模式之(十二)享元模式(Flyweight)
享元模式思想 就以小时候导锅来说吧(导锅是我家乡的方言,就是用细沙把一个模型锅的形状拓下来,然后把铝水倒进模型中,就导好一个锅了.小时候很喜欢看的,可惜现在看不到了.上个图片回忆下)了解了这个过程后就 ...
- Gin-Go学习笔记四:Gin-Web框架 文件的上传下载
文件的上传和下载 1->文件的上传 文件的上传,采用的是uploadify.js这个插件. 本事例实现的是上传图片文件,其他的文件上传也一样. 2->文件的下载 文件的下载有两个实现的方式 ...
- vulnhub AI: Web: 1
vulnhub AI: Web: 1 提取flag攻略 导入虚拟机,开机. 扫描NAT的C段,确定虚拟机IP和开放端口. 尝试访问该网站 发现什么都没有,抽根烟冷静一下...... 来波目录扫描吧 使 ...
- 37.前台js登陆加密分析
开篇 由于现在的登陆接口如果明文传输的话,容易被暴力破解,越来越多的网站选择了前台js加密的方式,像这样: 或者这样: 枯了,对渗透造成一定的影响 本篇文章将系统的讲述使用Python对前台js加密爆 ...
- 【MySQL】自增步长调整
mysql> show variables like '%increment%'; +-----------------------------+-------+ | Variable_name ...
- 适用于Centos6/7,vsftp自动安装脚本
#!/bin/bash #vsftp install . /etc/rc.d/init.d/functions NUM=`rpm -q centos-release | awk -F '-' '{pr ...
- <code> 标签 让一段计算机代码显示在网页中
<code> 标签 解释:要让一段计算机代码显示在网页中,那么这段代码需要用<code> 标签包起来,不然他会被当作网页的代码被 运行. 例如: <code>< ...
- Makefile 基础语法
1.. specify the directores , i not specified , search current directory put every folder into a list ...
- 【转】Pandas学习笔记(四)处理丢失值
Pandas学习笔记系列: Pandas学习笔记(一)基本介绍 Pandas学习笔记(二)选择数据 Pandas学习笔记(三)修改&添加值 Pandas学习笔记(四)处理丢失值 Pandas学 ...