(1) JS file
Create a Request object
function Createxmlhttprequest () {
try {
return new XMLHttpRequest ();//Most browsers
catch (e) {
try {
Return Actviexobject ("Msxml2.xmlhttp");//ie6.0
catch (e) {
try {
Return Actviexobject ("Microsoft.XMLHTTP");//ie5.5 and earlier versions
catch (e) {
Alert ("Dude, what kind of browser are you using?") ");
Throw e;
}
}
}
}
/*
* Option Object has the following properties
*/
/* Request Mode */method,
/* Requested url*/URL,
/* is asynchronous */asyn,
/* Request Body */params,
/* Callback method */callback,
/* Server response data conversion to what type */type
function Ajax (option) {
/*
* 1. Get XMLHTTP
*/
var xmlHttp = Createxmlhttprequest ();
/*
* 2. Open connection
*/
if (!option.method) {//The default is GET request
Option.method = "Get";
}
if (Option.asyn = = undefined) {//default to asynchronous processing
Option.asyn = true;
}
Xmlhttp.open (Option.method, Option.url, Option.asyn);
/*
* 3. To determine whether it is post
*/
if ("POST" = Option.method) {
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
}
/*
* 4. Send Request
*/
Xmlhttp.send (Option.params);
/*
* 5. Registering for listening
*/
Xmlhttp.onreadystatechange = function () {
if (xmlhttp.readystate = = 4 && xmlhttp.status = 200) {//double judgment
var data;
Gets the response data for the server and converts it.
if (!option.type) {//if type is not assigned, the default is text
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 +)");
}
Call callback method
Option.callback (data);
}
};
};
(2) using the Encapsulated AJAX Toolkit
<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%>
<%@ taglib prefix= "C" uri= "Http://java.sun.com/jsp/jstl/core"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>my JSP ' json3.jsp ' starting page</title>
<meta http-equiv= "Pragma" content= "No-cache" >
<meta http-equiv= "Cache-control" content= "No-cache" >
<meta http-equiv= "Expires" content= "0" >
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This are my page" >
<!--
<link rel= "stylesheet" type= "Text/css" href= "Styles.css" >
-->
<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 () {
/*
1. Ajax
*/
Ajax
{
URL: "<c:url value= '/aservlet '/>",
Type: "JSON",
Callback:function (data) {
document.getElementById ("H3"). InnerHTML = Data.name + "," + Data.age + "," + data.sex;
}
}
);
};
};
</script>
<body>
<%--Click on the button to display the server response data to the H3 element--%>
<button id= "BTN" > click here </button>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
