html --- ajax --- javascript --- 简单的封装
Ajax的简单封装
Ajax的全称是AsynchronousJavaScriptAndXML
如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX
以及传智播客的视频教程:http://java.itcast.cn/news/8308d118/740a/4dcd/8dbf/c73d2fe5bc60.shtml
其实已经有好多框架对它进行了封装,但是还是有好多时候用到自己封装的
透露一下,本人是宇多田光的听众之一哦!
封装后的代码如下:
文件路径:\web\AjaxRequest.js
/** * Created by yuki on 2014/5/13. * * 用法: 1.新建对象Ajax对象 2.设定带有一个XMLHttpRequest返回参数的回调函数 3.执行execute,传入请求方式,url,是否异步 * */ function Ajax() { this.xmlHttp = null; this.responseText = null; this.callback = null; } /** * 执行ajax */ Ajax.prototype.execute = function(method, url, async){ this.createXmlHttp(); this.sendUrl(method, url, async); this.getResponseText(); this.callback(); }; /** * 服务器返回服务器输出的纯文本数据 * @param embed */ Ajax.prototype.getResponseText = function(){ // 判断对象的状态 if (this.xmlHttp.readyState == 4) { // 判断http交互是否成功 if (this.xmlHttp.status == 200) { // 判断服务器返回的数据 // 获取服务器输出的纯文本数据 this.responseText = xmlHttp.responseText; } } }; /** * 发送url请求 * @param method 取值为GET或POST * @param url 要发送的url可以带请求参数 * @param async true表示异步,false表示同步 */ Ajax.prototype.sendUrl = function(method, url, async){ // 注册回调函数 this.xmlHttp.onreadystatechange = this.callback; // 第三个参数表示同步false或是异步true this.xmlHttp.open(method, url, async); // 发送数据,开始和服务器端交互 this.xmlHttp.send(); }; /** * 创建XMLHttpRequest */ Ajax.prototype.createXmlHttp = function(){ if (window.XMLHttpRequest) { this.xmlHttp = new XMLHttpRequest(); // 针对某些特定版本的Mozilla浏览器的BUG修正 if (this.xmlHttp.overrideMimeType) { this.xmlHttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // 针对IE6, IE5.5, IE5 var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < activexName.length; ++i) { try { // 取出控件名进行创建,如果创建成功就终止循环 this.xmlHttp = new ActiveXObject(activexName[i]); break; } catch (e) { // do nothing... } } } //确认XMLHttpRequest对象创建成功 if (!this.xmlHttp) { alert('XMLHttpRequest对象创建失败!'); } else { alert('XMLHttpRequest对象创建成功!'); } };
代码封装好了,怎么使用它呢?
看html页面的代码:
文件路径:\web\AjaxRequest.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="GBK"> <title>AjaxRequest</title> </head> <script src="AjaxRequest.js"></script> <body> <div id="div1" style="width:200px; height:200px; background-color: darkgoldenrod"></div> <script> var ajax = new Ajax(); ajax.callback = function(){ var responseText = this.responseText; var div1 = document.getElementById('div1'); div1.innerHTML = responseText; }; ajax.execute('GET', 'First.jsp', true); </script> </body> </html>
它是要访问服务器的,让jsp为它提供服务吧
文件路径:\web\First.jsp
<%-- Created by IntelliJ IDEA. User: yuki Date: 2014/5/13 Time: 23:07 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>HI</title> </head> <body> <h1>Hello Ajax!</h1> Date = <%= new java.util.Date() %> <br> </body> </html>
这样,Ajax的技术就可以是在页面不刷新的情况下,得到服务器的输出了
下面是结果:
更多好文请关注我的博客:
http://www.cnblogs.com/kodoyang/
html --- ajax --- javascript --- 简单的封装的更多相关文章
- 用javascript简单封装AJAX
1.创建一个AJAX引擎对象 var CreateAjax = function () { var xhr = null; if (window.XMLHttpRequest) { //非IE游览器 ...
- ajax的三次封装简单概况
原生ajax: readyState 准备状态 status 页面状态 ...
- 第107天:Ajax 实现简单的登录效果
使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...
- 第一百六十一节,封装库--JavaScript,完整封装库文件
封装库--JavaScript,完整封装库文件 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象, ...
- Django ajax的简单使用、自定义分页器
一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...
- 我自己的Javascript 库,封装了一些常用函数 Kingwell.js
我自己的Javascript 库,封装了一些常用函数 Kingwell.js 博客分类: Javascript javascript 库javascript库 现在Javascript库海量,流行的 ...
- Ajax+Ashx实现以及封装成控件的实现
asp.net 后台多线程异步处理时的 进度条实现一(Ajax+Ashx实现以及封装成控件的实现) 工作好长时间了,这期间许多功能也写成了不少的控件来使用,但是,都只是为了代码的结构清析一些而已.而这 ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
随机推荐
- linux下安装配置DHCP服务器
前提是已经安装了 core 及 base 两个组 1 2 3 4 5 # cat /etc/redhat-release Red Hat Enterprise Linux Server relea ...
- iOS:核心动画之转场动画CATransition
转场动画——CATransition CATransition是CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 U ...
- 推荐个Java代码质量检测的利器 —— FindBugs
一.下载 插件的下载地址(sourceforge):FindBugs-Eclipse插件 二.安装 Eclipse插件的安装,就不多说了. 三.使用 1.找一个Project,选中它(也可以针对某个P ...
- POJ -3190 Stall Reservations (贪心+优先队列)
http://poj.org/problem?id=3190 有n头挑剔的奶牛,只会在一个精确时间挤奶,而一头奶牛需要占用一个畜栏,并且不会和其他奶牛分享,每头奶牛都会有一个开始时间和结束时间,问至少 ...
- Linux系统信息查看命令
一.系统 # uname -a #查看内核/操作系统/CPU信息 # head -n 1 /etc/issue #查看操作系统版本 # cat /proc/cpuinfo #查看CPU信息 # hos ...
- PS太大GIMP可用
图片处理中Photoshop用的非常多,但是该软件过于臃肿,使用起来也非常复杂,对于一般性的图片处理,有没有其他可以选择的工具呢? GIMP是GNU Image Manipulation Progra ...
- Qt之自定义搜索框
简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void ...
- HDU 2064 (递推) 汉诺塔III
将柱子从左到右依次编号为A.B.C 设将n个盘子从一端移动到另一端的最少步数为f(n) 则f(n)和f(n-1)的递推关系为:f(n) = 3 × f(n-1) + 2 初始状态A柱子上面有n个盘子, ...
- HDFS常用命令
HDFS 常用的文件操作命令 hdfs dfs -text /pub/20151019/1/4/gwmvod/mediags.moretv.com.cn/*.bz2 | wc -l hdfs dfs ...
- 整理一些js中常见的问题
原文链接 1.js获取select标签选中的值 原生js var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = ...