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的简单介绍与使用的更多相关文章

  1. ajax的简单介绍

    响应主体,就是服务器给我们返回的结果内容(浏览器里的responsive) 请求主体,是我们给服务器的数据 输入域名发起一次请求,得到的可能是标签,标签可能还要在发一次请求 post怎么发请求:for ...

  2. AJAX简单介绍

     什么是AJAX Ajax 是 AsynchronousJavaScript and XML(以及 DHTML 等)的缩写. HTML 用于建立 Web表单并确定应用程序其它部分使用的字段. ·J ...

  3. Android项目开发全程(二)--Afinal用法简单介绍

    本篇博文接上篇的<Android项目开发全程(一)--创建工程>,主要介绍一下在本项目中用到的一个很重要的框架-Afinal,由于本系列博文重点是项目开发全程,所以在这里就先介绍一下本项目 ...

  4. JMS学习篇《一》ActiveMQ消息中间件的简单介绍与用法-概念篇

    原创说明:本篇博文为本人原创作品,转载请注明出处 1.何为消息中间件 消息中间件是一种在分布式应用中互相交换信息的一种技术,常见的成熟消息中间件有:RabbitMQ.SonicMQ,activeMQ. ...

  5. Eclipse rap 富客户端开发总结(1) :rap简单介绍和开发环境搭建

    一.rap简单介绍 1 基本概念     RAP可以让开发人员使用JAVA API和按照Eclipse 插件的开发模式构建基于AJAX的Web 2.0应用程序, RAP的工作原理是采用交叉编译的方式将 ...

  6. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  7. 【转】深入浅出JMS(二)--ActiveMQ简单介绍以及安装

    现实的企业中,对于消息通信的应用一直都非常的火热,而且在J2EE的企业应用中扮演着特殊的角色,所以对于它研究是非常有必要的. 这篇博文介绍一款开源的JMS具体实现——ActiveMQ.ActiveMQ ...

  8. Asp.net博客系统收集和简单介绍

    国内Asp.net博客系统收集和简单介绍       [转载文章,仅供个人参考,引自http://www.soyaoo.com/Blog/post/92.html] 1.ZJ-Blog程序简介:基于A ...

  9. React 简单介绍

    React 简单介绍 作者 RK_CODER 关注 2014.12.10 17:37* 字数 2516 阅读 55715评论 6喜欢 70 why React? React是Facebook开发的一款 ...

随机推荐

  1. oracle 日常设置

    查看缓冲区命令:list  执行save  1.sql 可以吧缓冲区的命令保存下来.  执行 @1.sql可以执行保存下来的内容:  show feedback 显示反馈信息,最后一行.  show ...

  2. kdbg安装使用教程(kali)

    一.背景说明 所谓调试者,主要就是下断点.观察变量,不是太复杂的事情也不用太复杂的工具. 但具体到linux平台而言,gdb本来多敲几下命令也不是不可以的事,但是一个屏幕就那么大打印出一堆东西又乱又看 ...

  3. WebSphere禁用SSLv3和RC4算法教程

    WebSphere经常会报“SSL 3.0 POODLE攻击信息泄露”和"SSL/TLS 受诫礼(BAR-MITZVAH)攻击"两个漏洞,前者建议禁用SSL算法后者建议禁用RC4算 ...

  4. summary_20th,Nov 2018

    一. 常量: 相对于变量,不改变的量 规定常量名全部大写(实际还是变量) 二:数值的运算符: 1. 算术运算符 +  和,    - 减,    *乘,       / 除(浮点数结果) // 取整, ...

  5. 【Loadrunner基础知识】web_get_int_proterty

    1.函数作用:记录http请求的响应信息 2.函数参数: HTTP_INFO_RETURN_CODE : http请求返回的状态码: HTTP_INFO_DOWNLOAD_SIZE : 返回页面下载的 ...

  6. python---多线程与多进程

    一. 单进程多线程 1. 使用的模块是Threading.使用join()函数进行阻塞. from pdf2txt import pdfTotxt1, pdfTotxt2 import xlrd im ...

  7. 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 ...

  8. 架构之路:nginx与IIS服务器搭建集群实现负载均衡(三)

    参考网址:https://blog.csdn.net/zhanghan18333611647/article/details/50811980 [前言] 在<架构之路:nginx与IIS服务器搭 ...

  9. day18 类与类之间的关系

    今日所学内容: 1.类与类之间的关系 2.self 到底是谁? 3. 特殊成员 : 1.类与类之间的关系 在我们的世界中事物和事物之前总会有一些联系 在面向对象中,类与类之间也可以产生相关的联系 1) ...

  10. Cracking The Coding Interview 4.0_二叉树

    #include <iostream> #include <string> using namespace std; class tree { public: tree() { ...