AJAX第一步:AJAX接收返回类型为text/html的字符串数据
来源:互联网 发布:重庆大学教育网络 编辑:程序博客网 时间:2024/06/05 17:06
在一个javaweb项目中,可能会用到网页的局部刷新,下面我将自己总结的使用ajax进行网页刷新的知识点记录下来。请求方式有get和post方式两种,下面我分别进行了示范。
jsp页面代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!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"><title>简易ajax 返回类型为Text/html</title></head><body><input type="button" onclick="ajaxGETMethod()" value="ajax1点击"><div id="ajax1">111</div><input type="button" onclick="ajaxPOSTMethod()" value="ajax2点击"><div id="ajax2">222</div></body>
<!-- ajax进行局部·刷新 --><script type="text/javascript">function ajaxGETMethod(){//声明对象var xmlhttp;//创建对象if(window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}else{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}//请求成功的话 此方法会接收来自servlet的返回数据xmlhttp.onreadystatechange=function() {//如果成功请求 并且成功接受响应if(xmlhttp.readyState==4 && xmlhttp.status==200){//id为ajax1的里面内容 设置为servlet返回的内容document.getElementById("ajax1").innerHTML = xmlhttp.responseText;}}//设置请求method方式为get 路径 以及是否异步 get方式的Content-Type: text/plain;charset=UTF-8xmlhttp.open("get","${pageContext.request.contextPath}/AjaxDemo_TextHTML?cmd=ajax1您好",true); //发送请求xmlhttp.send(); }</script>
<script type="text/javascript">function ajaxPOSTMethod(){var xmlhttp;if(window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}else{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function() {if(xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("ajax2").innerHTML = xmlhttp.responseText;}} //设置请求method方式为post 路径 以及是否异步 post方式的Content-Type: application/x-www-form-urlencodedxmlhttp.open("post","${pageContext.request.contextPath}/AjaxDemo_TextHTML",true);//设置请求头 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //发送请求xmlhttp.send("cmd=ajax2您好"); }</script></html>servlet页面代码:
package cn.sdut.ajaxdemo;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("/AjaxDemo_TextHTML")public class AjaxDemo_TextHTML extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//设置返回类型text/html 和编码格式 使中文不乱码response.setContentType("text/html;charset=utf-8");//获得请求消息String cmd = request.getParameter("cmd");System.out.println(cmd);//响应response.getWriter().write(cmd);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置返回类型text/html 和编码格式 使中文不乱码 request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//获得请求消息String cmd = request.getParameter("cmd");System.out.println(cmd);//响应response.getWriter().write(cmd);}}注意:浏览器会有缓存,所以每次ajax请求相同数据时,浏览器可能会给你显示的是缓存,要想不缓存 可以在请求后面加上一个时间参数,比如:
xmlhttp.open("post","${pageContext.request.contextPath}/AjaxDemo_TextHTML?date="+Date().getTime(),true);
阅读全文
1 0
- AJAX第一步:AJAX接收返回类型为text/html的字符串数据
- AJAX第二步:AJAX接收返回类型为text/XML的数据
- AJAX第三步:AJAX接收返回为JSON类型的数据
- ajax中解析json数据的各种方法(返回类型为json或text)
- jQuery的Ajax接收java返回数据
- ajax接收后台的text、HTML、xml、json数据,及其文件数据
- 关于ajax的dataType类型为text返回值乱码的问题
- ajax接收action的数据返回一大串的html代码的问题
- ajax接收后台传来的JSON类型数据,可通过循环遍历为input赋值(input的ID需要和返回来的数据名相同)
- ajax接收Date类型的数据时将会把数据转换为时间戳
- 对ajax的二次封装,返回接收到的数据
- Ajax返回xml类型数据
- jquery .ajax方法 异步表单,接收服务器返回的数据
- SSH Ajax Action 不能接收返回数据的问题
- jquery的ajax异步请求接收返回json数据实例
- ajax返回的data为字符串,如何返回json
- ajax请求接收返回json数据
- ajax请求后台并接收返回数据
- Mysql数据库事务的隔离级别和锁的实现原理分析(mvcc详解)
- 火狐a链接javascript:void(0);出现的问题
- 如何下载免费版的PDF编辑器
- idea创建springboot项目图文教程(四)
- python--异常处理
- AJAX第一步:AJAX接收返回类型为text/html的字符串数据
- matlab2c使用c++实现matlab函数系列教程-abs函数
- SSH整合(配置文件)
- 圆环的颜色切换与速度控制
- Codeforces 851A
- 网易2018校招内推--整数数列
- pkg-config命令使用
- <netty权威指南>笔记-分隔符解码器处理半包问题
- JavaScript专业八级测试,你能做对几道?