后端程序员如何玩转AJAX
1.原生的Ajax入门 (感觉很是繁琐,所以一般我们都是用简单的方式)
- 创建一个核心对象 XMLHttpRequest
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} - 编写一个回调函数
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//xmlhttp.responseText;
//这里可以对返回的数据进行处理
}
} - 编写请求方式和请求的路径(open操作)
xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax1", true);
- 发送请求(send操作)
xmlhttp.send();
- 入门案例演示
- 前端页面
<%@ 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</title>
</head>
<body>
<button onclick="yuansheng()">点我一下</button>
</body>
<script type="text/javascript">
function yuansheng() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//xmlhttp.responseText;
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax1", true);
xmlhttp.send(); }
</script>
</html> - Servlet页面
package 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("/ajax1")
public class YuanshengAjax extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("点我了一下");
response.getWriter().print("hello");
} protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
} }
- 前端页面
2.Jquery发送Ajax (记得导入jquery.js)
- 方式一:jquery对象.load(url,params,function(数据){});
$("#feeds").load("feeds.html");
- ★★★方式二:$.get(url,params,function(数据){},type);
function jqget() {
$.get("${pageContext.request.contextPath}/jsget", {
"hello" : "hellovalue"
}, function(data) {
alert(data);
},type="json"); } - ★★★方式三:$.post(url,params,function(数据){},type);
function jqpost(){
$.post("${pageContext.request.contextPath}/jspost", {
"hello" : "hellovalue"
}, function(data) {
alert(data);
},type="json");
} - 方式四:$.ajax([选项]);
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
3.Jquery发送Ajax如何发送数据
- $.get(url,params,function(数据){},type);
- params:请求的参数 参数为key\value的形式 key=value {"":"","":""}
- $.post(url,params,function(数据){},type);
- params:请求的参数 参数为key\value的形式 key=value {"":"","":""}
4.Jquery发送的Ajax如何接受数据
- 在使用Ajax发送Ajax的时候我们可以在我们可以通过指定type的值来设置返回数据的格式
- type:返回内容格式,xml, html, script, json, text, _default。 我们经常在开发中使用"json"
- 如果后台返回的数据为json格式我们如何获取呢?
function jqget() {
$.get("${pageContext.request.contextPath}/jsget", {
"hello" : "hellovalue"
}, function(data) {
var j = eval(json);
alert(j.username)
},type="json"); }
后端程序员如何玩转AJAX的更多相关文章
- 后端程序员必备的 Linux 基础知识
1. 从认识操作系统开始 正式开始 Linux 之前,简单花一点点篇幅科普一下操作系统相关的内容. 1.1. 操作系统简介 我通过以下四点介绍什么是操作系统: 操作系统(Operating Syste ...
- 写给后端程序员的HTTP缓存原理介绍
There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Ka ...
- 科普,想成为厉害的 Java 后端程序员,你需要懂这 13 个知识点
老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题. 站 ...
- 科普,想成为厉害的 Java 后端程序员,你需要懂这些
站在运筹帷幄的角度来看,一名厉害的 Java 后端程序员都需要懂得哪些知识呢?我想,这也是很多读者迫切想知道的一个问题,因为如果不站在一个宏观的角度的话,所有学过的知识点都是零散的,就感觉像一只迷路的 ...
- Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)
前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...
- 后端程序员实现一个IP归属地的小程序
在日常开发中,后端主要提供数据以及处理业务逻辑,前端主要提供页面布局以及数据展示.后端程序员对于页面布局接触比较少,但是小程序有完善的文档说明.页面布局也相对简单,实现起来相对简单一些.而且小程序相对 ...
- Java后端程序员都做些什么?
这个问题来自于QQ网友,一句两句说不清楚,索性写个文章. 我刚开始做Web开发的时候,根本没有前端,后端之说. 原因很简单,那个时候服务器端的代码就是一切:接受浏览器的请求,实现业务逻辑,访问数据库, ...
- 后端程序员必备的 Linux 基础知识+常见命令(近万字总结)
大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 今天这篇文章中简单介绍一下一个 Java 程序员必知的 Linux 的一些概念以及常见命令. 如果文章有任何需要 ...
- java后端程序员1年工作经验总结
java后端1年经验和技术总结(1) 1.引言 毕业已经一年有余,这一年里特别感谢技术管理人员的器重,以及同事的帮忙,学到了不少东西.这一年里走过一些弯路,也碰到一些难题,也受到过做为一名开发却经常为 ...
随机推荐
- Hystrix入门执行过程
netflix-hystrix团队开发了hystrix-javanica,使用流行的java注解以及函数式编程,来替代hystrix枯燥的编程方法. 其主要是HystrixCommand注解的使用. ...
- OSI各层的功能和主要协议(转载)
OSI各层的功能和主要协议: 物理层 物理层规定了激活.维持.关闭通信端点之间的机械特性.电气特性.功能特性以及过程特性.该层为上层协议提供了一个传输数据的物理媒体. 在这一层,数据的单位称为比特(b ...
- mysql误删root用户或者忘记root密码解决方法
解决方法一: 到其他安装了Mysql的服务器(前提是要知道该服务器上Mysql的root用户密 码),打开[Mysql的安装目录/var/mysql],将其中的user.frm.user.MYD.us ...
- 0x00 译文:Windows桌面应用入门选择
当你想要创建一个新的桌面应用的时候,第一个你需要做的决定是使用Win32 和COM 还是使用.NET两个选项. C++ 和 Win32 使你“离奖牌更近”,并使你可以获得最佳的应用性能..NET 使你 ...
- [转]使用jquery-webcam插件,实现人脸采集并转base64
项目需求:在ie或chrome浏览器下,调用电脑摄像头(确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机),进行人脸图像采集预览,并将图片的base64码传入到后台进行后续操作.该demo适用于 ...
- POJ - 3264 Balanced Lineup (RMQ问题求区间最值)
RMQ (Range Minimum/Maximum Query)问题是指:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A中下标在i,j里的最小(大)值,也就 ...
- 线程相关函数(7)-sem_post(), sem_wait() 信号量
sem_tsem_initsem_waitsem_trywaitsem_timedwaitsem_postsem_destroy 生产者消费者实例: #include <stdlib.h> ...
- js基本知识3
1. 函数 function 函数的声明 函数的 调用 函数的传参 2. 函数返回值 Return 返回结果 返回给函数 Id 函数 function $id(id) { return documen ...
- Ubuntu/Debian交叉编译安装ARM平台版本的ffmpeg
1 准备工作 (1)libmp3lame库 下载: wget http://downloads.sourceforge.net/lame/lame-3.99.tar.gz 解压 编译:./con ...
- Qt学习过程中遇到的问题
由于工作需要,开始使用Qt,由于在网上找的教程文档时针对qt3的,所以在学习的过程遇到了许多由于版本不一致造成的问题,因此记录下来. 参考的文档是:Qt入门教程 详细讲解版 本机Qt版本为:Qt5.3 ...