本文详细介绍了Ajax的概念、用途、内部原理及使用方法，包括GET和POST两种请求方式。Ajax允许网页在不刷新整个页面的情况下与服务器交换数据，提升了用户体验。文中通过实例展示了创建XMLHttpRequest对象、发送请求以及获取响应数据的步骤，并提供了相应的JavaScript代码示例。
文章目录
1. Ajax是什么
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术 ， 它并不是一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成：
- 使用CSS和XHTML来表示。
- 使用DOM模型来交互和动态显示。
- 使用XMLHttpRequest来和服务器进行异步通信。
- 使用javascript来绑定和调用。
在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。
2. 有什么用？
传统的网页，如果需要更新内容，必须加载整个网页。 如果只需要对网页上的某个内容进行局部刷新， 那么就需要使用到Ajax了。 它可以让我们无需重新加载全部网页内容，即可完成对某个部分的内容执行刷新 。
最典型的的例子， 莫过于大家在注册网站的时候， 输入的用户名，会自动的提示我们，该用户已被注册。
3. 内部原理
诚如我们前面所说的， Ajax 并不是一项新技术。而是包装了现有的技术，然后使用他们来完成工作而已。
那么现在给大家举个例子， 还是以咱们的判断用户名是否已被注册为例。
传统方式：
- 输入用户名，
- 点击一个按钮，校验。
- 把数据提交给服务器
- 服务器在后台帮助我们完成校验，并且反馈信息。
- 我们在浏览器上提示用户，给出结果
Ajax方式：
ajax方式与前面的方式其实从要做的事情来说，是一样的。 ajax也没有牛到，不用去访问服务器就知道你的用户名是否已被占用。那么它是如何工作的呢?
-
通过JS 获取咱们的输入框文本内容 document.getElementById(“username”).value
-
通过XmlHttpRequest 去执行请求。 XmlHttpRequest 其实就是 XML + http + Request 的组合。
-
请求结束后，收到结果， 再使用 js 去完成提示。
-
可以在顺便配合 css 样式来增加提示效果。
4. 怎么使用？
4.1 数据请求 Get
4.1.1 创建对象 Get
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
4.1.2 发送请求 Get
// 执行get请求
function get(){
// 1.创建xmlhttprequest对象
var request = ajaxFunction();
// 2.发送请求
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
*/
//request.open("GET","/Ajax/DemoServlet01",true);
request.open("GET","/Ajax/DemoServlet01?name=aa&age=18",true);
request.send();
}
4.1.3 发送请求的同时获取数据 Get
// 发送请求的同时获取数据
function get2(){
// 1.创建xmlhttprequest对象
var request = ajaxFunction();
// 2.发送请求
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
*/
//request.open("GET","/Ajax/DemoServlet01",true);
request.open("GET","/Ajax/DemoServlet01?name=aa&age=18",true);
// 3.获取响应数据，注册监听的意思。
// 一会准备的状态发生了改变，那么就执行 = 号右边的方法
request.onreadystatechange = function(){
//前半段表示 已经能够正常处理。 再判断状态码是否是200
if(request.readyState == 4 && request.status == 200){
// 收到数据，进行处理（这里弹出响应的信息）
alert(request.responseText);
}
}
request.send();
}
4.1.4 例子 Get
DemoServlet01.java:
package com.tx.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class DemoServlet01 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("收到了一个请求..." +name+"="+age);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("收到了请求...");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
demo01.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
// 执行get请求
function get(){
// 1.创建xmlhttprequest对象
var request = ajaxFunction();
// 2.发送请求
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
*/
//request.open("GET","/Ajax/DemoServlet01",true);
request.open("GET","/Ajax/DemoServlet01?name=aa&age=18",true);
request.send();
}
// 发送请求的同时获取数据
function get2(){
// 1.创建xmlhttprequest对象
var request = ajaxFunction();
// 2.发送请求
/*
参数一： 请求类型 GET or POST
参数二： 请求的路径
参数三： 是否异步， true or false
*/
//request.open("GET","/Ajax/DemoServlet01",true);
request.open("GET","/Ajax/DemoServlet01?name=aa&age=18",true);
// 3.获取响应数据，注册监听的意思。
// 一会准备的状态发生了改变，那么就执行 = 号右边的方法
request.onreadystatechange = function(){
//前半段表示 已经能够正常处理。 再判断状态码是否是200
if(request.readyState == 4 && request.status == 200){
// 收到数据，进行处理（这里弹出响应的信息）
alert(request.responseText);
}
}
request.send();
}
</script>
</head>
<body>
<h3><a href="" onclick="get()">使用Ajax方式发送Get请求</a></h3>
<h3><a href="" onclick="get2()">使用Ajax方式发送Get请求，并响应</a></h3>
</body>
</html>
4.2 数据请求 Post
4.2.1 创建对象 Post
// 1. 创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
4.2.2 发送请求 Post
// 2. 发送Post请求
function post() {
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open( "POST", "/Ajax/DemoServlet01", true );
// 不带数据
// request.send();
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=tx&age=19");
}
4.2.3 发送请求并接收响应 Post
// 2. 发送Post请求并获取响应数据
function post2() {
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open( "POST", "/Ajax/DemoServlet01", true );
//想获取服务器传送过来的数据， 加一个状态的监听。
request.onreadystatechange=function(){
if(request.readyState==4 && request.status == 200){
alert("post："+request.responseText);
}
}
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=tx&age=19");
}
4.2.4 示例 Post
DemoServlet01.java
package com.tx.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class DemoServlet01 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("收到了一个请求..." +name+"="+age);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("收到了请求...");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("来了一个Post请求，走get代码...");
doGet(request, response);
}
}
demo02.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 1. 创建对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
// 2. 发送Post请求
function post() {
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open( "POST", "/Ajax/DemoServlet01", true );
// 不带数据
// request.send();
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=tx&age=19");
}
// 2. 发送Post请求并获取响应数据
function post2() {
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open( "POST", "/Ajax/DemoServlet01", true );
//想获取服务器传送过来的数据， 加一个状态的监听。
request.onreadystatechange=function(){
if(request.readyState==4 && request.status == 200){
alert("post："+request.responseText);
}
}
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=tx&age=19");
}
</script>
</head>
<body>
<h3><a href="" onclick="post()">使用Ajax方式发送Post请求</a></h3>
<h3><a href="" onclick="post2()">使用Ajax方式发送Post请求，并响应</a></h3>
</body>
</html>
扫一扫
3302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
