Ajax学习(二):模仿jQuery的Ajax封装工具
通过上一节的学习,基本了解Ajax的使用,
但是这样使用很麻烦,这里封装ajax为一个方法,作为一个ajax工具,传入相应参数就可以实现ajax的使用。
模仿jQuery的Ajax。
如下是jQuery的Ajax使用,只需要传入相应参数,即可实现Ajax
第一步:创建Ajax工具类:
function createXMLRequst(){
try{
return new XMLHttpRequest();
}catch(e)
{
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("不支持浏览器版本");
throw e;
}
}
}
} function ajax(option)
{
var xmlHttp=createXMLRequst();
//打开链接
if(!option.method)//默认get
{
option.method="GET";
}
if(option.asyn==null)//默认为异步处理
{
option.asyn=true;
} xmlHttp.open(option.method,option.url,option.asyn); //POST需要设置请求头
if(option.method=="POST")
{
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
//发送请求,加上请求参数
xmlHttp.send(option.params);
//给异步对象的onreadystatechange事件注册监听器
xmlHttp.onreadystatechange=function()
{
//双重判断,判断是否为4的状态,并且响应状态码为:200
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
var data;
if(!option.type){
data=xmlHttp.responseText;
}else if(option.type=="xml"){
data=xmlHttp.responseXML;
}else if(option.type=="text"){
data=xmlHttp.responseText;
}else if(option.type=="json"){
var text=xmlHttp.responseText;
data=eval("("+text+")");
}
//调用回调函数
option.callback(data);
}
}
}
第二步:在jsp中引入该脚本,同时调用脚本中的ajax()方法,实现Ajax。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 地址可以使用以下方式,也可直接写url
<script type="text/javascript" src="/AjaxDemo/ajax_lib/ajaxUtils.js"></script>
引入Ajax工具脚本 -->
<script type="text/javascript" src="<c:url value='/ajax_lib/ajaxUtils.js'/>" ></script>
<script type="text/javascript">
window.onload=function(){ //文档加载完毕后执行
var btn=document.getElementById("btn");
btn.onclick=function(){
ajax(
{
url:"/AjaxDemo/JsonAjax",
type:"json",
callback:function(data){
document.getElementById("h3").innerHTML=data.name+","+data.age+","+data.sex;
}
}
);
}
}
</script>
<title>测试Ajax工具</title>
</head>
<body> <h3>测试Ajax工具</h3>
<button id="btn">点击测试Ajax工具</button>
<h3 id="h3"></h3>
</body>
</html>
第三步:编写该Ajax调用的servlet:向客户端返回json字符串
package com.Ajax; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/JsonAjax")
public class JsonAjax extends HttpServlet {
private static final long serialVersionUID = 1L; public JsonAjax() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
//向客户端返回数据,由Ajax获取
response.getWriter().print("{\"name\":\"张三\",\"age\":\"32\",\"sex\":\"男\"}");
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} }
运行结果:
Ajax学习(二):模仿jQuery的Ajax封装工具的更多相关文章
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- 【jQuery基础学习】05 jQuery与Ajax以及序列化
好吧,这章不像上章那么水了,总是炒剩饭也不好. 关于AJAX 所谓Ajax,全名Asynchronous JavaScript and XML.(也就异步的JS和XML) 简单点来讲就是不刷新页面来发 ...
- Ajax请求(二)--JQuery的Ajax请求方法
JQuery库的Ajax请求的几种方法: 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. 参数含义: url (String ...
- ajax系列之用jQuery的ajax方法向服务器发出get和post请求
打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...
- Ajax学习笔记之一----------第一个Ajax Demo[转载]
原文地址: http://www.cnblogs.com/pjx412/archive/2011/05/04/2037014.html 一.核心推动力:XMLHttpRequest对象XMLHttpR ...
- ajax学习笔记(原生js的ajax)
ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等). ajax优点: 1) 页面无刷新的动态数据交互 2) 局部刷新页面 3) 界面的美观 4) ...
- Ajax学习总结(1)——Ajax实例讲解与技术原理
摘要:AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用 ...
- Ajax学习(一)——与Ajax的初次相识
AJAX是"Asynchronous Javascript And XML"的缩写,从字面上解释是"异步JavaScript和XML"的简称. 它不是一 ...
随机推荐
- 【转】qt ,使用tcp/ip协议网络传输数据时,字节序转换方法
网络传输数据是需要保证字节序的正确,才能保证传输数据的准确,网络字节序一般是大端字节序.qt提供了以下两种方法来将本地字节序转换为网络字节序: 方法一,使用qt提供的字节序转换函数 T qFromBi ...
- File targeting 'AMD64' is not compatible with the project's target platform 'x86' 解决方法
我在使用vs2010制作64位安装包时出现了以下问题: File targeting 'AMD64' is not compatible with the project's target plat ...
- MFC中打印对话框CPrintDialog类
void CCPrintDialogView::OnPrint() { DWORD dwflags=PD_ALLPAGES|PD_NOPAGENUMS|PD_USEDEVMODECOPIES|PD_S ...
- Android -- 处理ViewPager的notifyDataSetChanged无刷新
Viewpager在调用notifyDataSetChanged()时,界面无刷新 Viewpager在调用notifyDataSetChanged()时,界面无刷新,它确实影响我们功能的实现了.可能 ...
- 【Java】SAX解析characters 错误截取问题的解决
SAX解析characters 错误截取问题的解决 SAX characters bug_百度搜索 SAX解析characters 错误截取问题的解决 - CSDN博客 [Android]SAX解析之 ...
- 基于浏览器的开源“管理+开发”工具,Pivotal MySQL*Web正式上线!
基于浏览器的开源“管理+开发”工具,Pivotal MySQL*Web正式上线! https://www.sohu.com/a/168292858_747818 https://github.com/ ...
- dubbo Framework pic
dubbo Framework pic
- PostgreSQL入门教程
一.安装 首先,安装PostgreSQL客户端. sudo apt-get install postgresql-client 然后,安装PostgreSQL服务器. sudo apt-get ins ...
- C++ 纯虚方法
1.纯虚方法解决什么样的问题,为什么要设计出纯虚方法? 考虑下面的需求,基类声明了一个方法,这个方法只针对具体的子类才有意义,比如Animal的Eat()方法,调用Animal的Eat方法是没有意义的 ...
- Android LazyList 从网络获取图片并缓存
原演示地址 本文内容 环境 演示 LazyList 从网络获取图片并缓存 参考资料 本文是 Github 上的一个演示,通过网络获取歌手专辑的缩略图,并显示在 ListView 控件中.该演示具备将缩 ...