19、Ajax剖析

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了19、Ajax剖析，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_502_0@Ajax（Asynchronous JavaScript and XML），异步的JavaScript与XML，强调异步。

@H_502_0@所谓异步，就是前一个操作还没完成，就可以进行下一个操作，提高用户体验，页面可以局部刷新，减少网络传输流量

@H_502_0@1、Ajax中的一个重要对象是XMLHttpRequest。

@H_502_0@2、使用Ajax准备向服务器端发送请求：xmlHttpRequest.open("GET","AjaxServlet",true);

@H_502_0@一个Ajax使用实例：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'ajax.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 is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">

	var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象

	function ajaxSubmit()
	{
		if(window.ActiveXObject)//IE浏览器
		{	
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");	
		}
		else if(window.XMLHttpRequest)//除IE外的其他浏览器实现
		{
			xmlHttpRequest = new XMLHttpRequest();
		}

		if(null != xmlHttpRequest)
		{
			xmlHttpRequest.open("GET",true);
			//关联好ajax的回调函数
			xmlHttpRequest.onreadystatechange = ajaxCallBack;

			//真正地向服务器端发送数据
			xmlHttpRequest.send(null);	
					
		}
		
	}

	function ajaxCallBack()
	{
		if(xmlHttpRequest.readyState == 4)
		{
			if(xmlHttpRequest.status == 200)
			{
				var responseText = xmlHttpRequest.responseText;
				document.getElementById("div1").innerHTML = responseText;
			}
		}
	}
	
	</script>
  </head>
  
  <body>
    <input type="button" value="get from server" onclick="ajaxSubmit();">
    <div id="div1"></div>
  </body>
</html>
@H_502_0@
调用的Servlet：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet
{
	@Override
	protected void doGet(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException
	{
		PrintWriter out = resp.getWriter();
		
		System.out.println("doGet invoke");
		
		out.println("hello world");
		out.flush();
	}
}
@H_502_0@
对于上面的程序，如果在firefox中进行测试，点击一次按钮，就会在MyEclipse控制台打印一次doGet invoke，但是如果使用IE浏览器，则只是在第一次点击按钮时打印doGet invoke，此后再按就没有打印信息了。

@H_502_0@上述原因是因为IE缓存的问题，将Servlet进行修改如下：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet
{
	@Override
	protected void doGet(HttpServletRequest req,IOException
	{
		PrintWriter out = resp.getWriter();
		
		try
		{
			Thread.sleep(5000);
		}
		catch(Exception e)
		{
			e.printStackTrace();
		}
		System.out.println("doGet invoke");
		
		resp.setHeader("pragma","no-cache");
		resp.setHeader("cache-control","no-cache");
		out.println("hello world");
		out.flush();
	}
}
@H_502_0@
IE每次点击按钮都打印。

@H_502_0@3、带参数的ajax实例 分别使用GET和POST进行传递：

@H_502_0@页面ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'ajax.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,keyword3">
	<Meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">

	var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象

	function ajaxSubmit()
	{
		if(window.ActiveXObject)//IE浏览器
		{	
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");	
		}
		else if(window.XMLHttpRequest)//除IE外的其他浏览器实现
		{
			xmlHttpRequest = new XMLHttpRequest();
		}

		if(null != xmlHttpRequest)
		{
			var v1 = document.getElementById("value1ID").value;
			var v2 = document.getElementById("value2ID").value;
			
			//xmlHttpRequest.open("GET","AjaxServlet?v1=" + v1 + "&v2=" + v2,true);
			xmlHttpRequest.open("POST",true);
			//关联好ajax的回调函数
			xmlHttpRequest.onreadystatechange = ajaxCallBack;

			//真正地向服务器端发送数据
			//xmlHttpRequest.send(null); //对应GET方法的send
			
			//使用POST方式提交，必须要加上如下一行，不加这一行，传递参数v1=null  v2=null
			xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			
			xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);	
					
		}
		
	}

	function ajaxCallBack()
	{
		if(xmlHttpRequest.readyState == 4)
		{
			if(xmlHttpRequest.status == 200)
			{
				var responseText = xmlHttpRequest.responseText;
				document.getElementById("div1").innerHTML = responseText;
			}
		}
	}
	
	</script>
  </head>
  
  <body>
    <input type="button" value="get from server" onclick="ajaxSubmit();"><br/>
    <input type="text" name="value1" id="value1ID"><br/>
    <input type="text" name="value2" id="value2ID" ><br/>
	<div id="div1"></div>
	

  </body>
</html>
@H_502_0@
接收请求的Servlet：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet
{
	@Override
	protected void doGet(HttpServletRequest req,IOException
	{
		process(req,resp);
	}

	private void process(HttpServletRequest req,HttpServletResponse resp)
			throws IOException
	{
		String v1 = req.getParameter("v1");
		String v2 = req.getParameter("v2");
		
		System.out.println("v1=" + v1 + "  v2=" + v2);
		String v3 = String.valueOf(Integer.valueOf(v1) + Integer.valueOf(v2));
		PrintWriter out = resp.getWriter();
		
		/*
		try
		{
			Thread.sleep(5000);
		}
		catch(Exception e)
		{
			e.printStackTrace();
		}
		*/
		System.out.println("doGet invoke");
		
		resp.setHeader("pragma","no-cache");
		out.println(v3);
		out.flush();
	}
	
	@Override
	protected void doPost(HttpServletRequest req,IOException
	{
		System.out.println("doPost invoke");
		this.process(req,resp);
	}
}
原文链接：https://www.f2er.com/ajax/166468.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作