Ajax的简单介绍与使用
1.什么是Ajax?
Ajax(Asynchronous JavaScript and XML),简单说就是不需要刷新当前页面而实现javaScript和和后台服务器交换数据以更新网页中的部分内容。
2. 实现
第一步: 创建 XMLHttpRequest 对象,老版的IE浏览器用 ActiveXObject 对象
var request;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
}else{// code for IE6, IE5
request = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步:准备相关数据 , 调用 request.open();方法,
request.open(method,url);// method是请求方式:GET/POST,url是请求目标
第三步:调用request.send();方法
request.send(data);// data是通过此请求要发送的数据
第四步:为request对象的属性onreadystatechange添加响应函数,此函数由系统触发,然后根据响应状态做出相应的处理
request.onreadystatechange = function(){
// 判断响应是否完成
if(request.readyState == 4){
// 判断响应结果是否正常
if(request.status == 200 || request.status == 304){
/**
request.responseText 或 request.responseXML 返回的数据,在这里做相应的处理
*/
}
}
}
至此一次Ajax通信完成!
说明:响应的返回的数据格式有三种:
html 格式,不需解析,可以直接镶嵌到页面中——不太方便;
XML 格式, 通用数据格式,占用的空间较大,解析相对困难;
JSON 格式,占用空间较小,有面向对象的特点,且有第三方 jar 包可以将java对象或集合包装成JSON字符串。
3. 用JQuery实现Ajax操作
对于 html 或 text 格式的数据,可直接使用 $( selector).load();方法;
$(selector).load(url,args) // url 为请求的目标位置,默认的请求方式的GET,但args若作为第二参数时自动转换为POST方式,注意,args必须是JSON格式
这样返回的 responseText 会直接加载成 selector 对应节点的子元素。
对于XML格式和JSON格式则有 $.get(url,[args],[callback],[type]) 或 $.post(url,[args],[callback],[type]) 方法,args是要发送的数据,callback为回调函数,接受的数据在回调函数的参数 data 中,type是指以相应的数据格式接受数据;
// 这是用get方法接收XML格式的数据
$("a").click(function(){ // 为 a 标签添加 click 函数
var url = this.href;
$.get(url,function(data){ // data的内容就是下面XML文档的内容
var name = $(data).find("name").text();
var website = $(data).find("website").text();
var email = $(data).find("email").text();
$("#content").empty().append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
.append("<a href='"+website+"'>"+website+"</a>"); // 将数据加在 id 为 content 的节点下面
});
return false; // 取消 a 标签的默认操作
});
<?xml version="1.0" encoding="UTF-8"?>
<details>
<name>Andy Budd</name>
<website>http://andybudd.com</website>
<email>andy@clearleft.com</email>
</details>
若是JSON数据,则可以用eval() 处理一下data,或者在get方法中加入 "JSON" 作为 type 参数,或直接调用$.getJSON() 方法,则得到的 data 就是一个JSON 对象。
$.get(url,args,function(data){
// data 是JSON对象
},"JSON");
$.post(url,args,function(data){
// data 是JSON对象
},"JSON");
$.getJSON(url,args,function(data){
// data 是JSON对象
});
然后根据页面的需要将数据更新到页面即可!
Ajax的简单介绍与使用的更多相关文章
- ajax的简单介绍
响应主体,就是服务器给我们返回的结果内容(浏览器里的responsive) 请求主体,是我们给服务器的数据 输入域名发起一次请求,得到的可能是标签,标签可能还要在发一次请求 post怎么发请求:for ...
- AJAX简单介绍
什么是AJAX Ajax 是 AsynchronousJavaScript and XML(以及 DHTML 等)的缩写. HTML 用于建立 Web表单并确定应用程序其它部分使用的字段. ·J ...
- Android项目开发全程(二)--Afinal用法简单介绍
本篇博文接上篇的<Android项目开发全程(一)--创建工程>,主要介绍一下在本项目中用到的一个很重要的框架-Afinal,由于本系列博文重点是项目开发全程,所以在这里就先介绍一下本项目 ...
- JMS学习篇《一》ActiveMQ消息中间件的简单介绍与用法-概念篇
原创说明:本篇博文为本人原创作品,转载请注明出处 1.何为消息中间件 消息中间件是一种在分布式应用中互相交换信息的一种技术,常见的成熟消息中间件有:RabbitMQ.SonicMQ,activeMQ. ...
- Eclipse rap 富客户端开发总结(1) :rap简单介绍和开发环境搭建
一.rap简单介绍 1 基本概念 RAP可以让开发人员使用JAVA API和按照Eclipse 插件的开发模式构建基于AJAX的Web 2.0应用程序, RAP的工作原理是采用交叉编译的方式将 ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- 【转】深入浅出JMS(二)--ActiveMQ简单介绍以及安装
现实的企业中,对于消息通信的应用一直都非常的火热,而且在J2EE的企业应用中扮演着特殊的角色,所以对于它研究是非常有必要的. 这篇博文介绍一款开源的JMS具体实现——ActiveMQ.ActiveMQ ...
- Asp.net博客系统收集和简单介绍
国内Asp.net博客系统收集和简单介绍 [转载文章,仅供个人参考,引自http://www.soyaoo.com/Blog/post/92.html] 1.ZJ-Blog程序简介:基于A ...
- React 简单介绍
React 简单介绍 作者 RK_CODER 关注 2014.12.10 17:37* 字数 2516 阅读 55715评论 6喜欢 70 why React? React是Facebook开发的一款 ...
随机推荐
- oracle 日常设置
查看缓冲区命令:list 执行save 1.sql 可以吧缓冲区的命令保存下来. 执行 @1.sql可以执行保存下来的内容: show feedback 显示反馈信息,最后一行. show ...
- kdbg安装使用教程(kali)
一.背景说明 所谓调试者,主要就是下断点.观察变量,不是太复杂的事情也不用太复杂的工具. 但具体到linux平台而言,gdb本来多敲几下命令也不是不可以的事,但是一个屏幕就那么大打印出一堆东西又乱又看 ...
- WebSphere禁用SSLv3和RC4算法教程
WebSphere经常会报“SSL 3.0 POODLE攻击信息泄露”和"SSL/TLS 受诫礼(BAR-MITZVAH)攻击"两个漏洞,前者建议禁用SSL算法后者建议禁用RC4算 ...
- summary_20th,Nov 2018
一. 常量: 相对于变量,不改变的量 规定常量名全部大写(实际还是变量) 二:数值的运算符: 1. 算术运算符 + 和, - 减, *乘, / 除(浮点数结果) // 取整, ...
- 【Loadrunner基础知识】web_get_int_proterty
1.函数作用:记录http请求的响应信息 2.函数参数: HTTP_INFO_RETURN_CODE : http请求返回的状态码: HTTP_INFO_DOWNLOAD_SIZE : 返回页面下载的 ...
- python---多线程与多进程
一. 单进程多线程 1. 使用的模块是Threading.使用join()函数进行阻塞. from pdf2txt import pdfTotxt1, pdfTotxt2 import xlrd im ...
- 20 KMP匹配的Next值和Nextval值
i 0 1 2 3 4 5 6 7 8 s a b a b a a b a b n ...
- 架构之路:nginx与IIS服务器搭建集群实现负载均衡(三)
参考网址:https://blog.csdn.net/zhanghan18333611647/article/details/50811980 [前言] 在<架构之路:nginx与IIS服务器搭 ...
- day18 类与类之间的关系
今日所学内容: 1.类与类之间的关系 2.self 到底是谁? 3. 特殊成员 : 1.类与类之间的关系 在我们的世界中事物和事物之前总会有一些联系 在面向对象中,类与类之间也可以产生相关的联系 1) ...
- Cracking The Coding Interview 4.0_二叉树
#include <iostream> #include <string> using namespace std; class tree { public: tree() { ...