JavaScript ： 浅讲ajax
1.ajax入门案例
1.1 搭建Web环境
ajax对于各位来说，应该都不陌生，正因为ajax的产生，导致前台页面和服务器之间的数据传输变得非常容易，同时还可以实现页面的局部刷新。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
对于JavaWeb项目而言，ajax主要用于浏览器和服务器之间数据的传输。
如果是单单地堆砌知识点，会显得比较无聊，那么根据惯例，我先不继续介绍ajax，而是来写一个案例吧。
打开eclipse，新建一个web项目。
如果对JavaWeb项目还不太清楚的，可以去参考我之前的文章。我
目录结构：
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
</web-app>
这样就好了，web项目搭建完毕。
暂时不要往下写，先确保我们到目前为止的工作是没问题的。
验证方法就是在WebContent目录下，新建一个空的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>Insert title here</title>
</head>
<body style="padding:100px">
<h1>Hello World</h1>
</body>
</html>
启动tomcat，把这个项目跑起来。
没报错。
打开浏览器，输入访问地址，我这里的tomcat端口号是80 ,默认可以不写。
http://localhost/ajax/index.jsp
来了，没问题。
好的，这说明我们的web项目搭建没有问题。
1.2 编写服务器程序Servlet
个人感悟，精粹整理
web环境已经搭好，接下来，让我们来编写一个简单的Servlet程序，tomcat是一个服务器，现在它里面有一个名字叫做ajax的web项目，那么这些Servlet就好比是web项目里面的一个个小功能。
你的电脑里面有QQ，Word，杀毒软件等程序。一个web项目，也就是一个应用程序。本质上和你电脑上的QQ概念是一样一样的。
你打开QQ，可以聊天，语音，视频。这些小功能，类比到JavaWeb项目，就是一个个Servlet。
很多人都知道框架，比如大名鼎鼎的SpringMVC，里面有一个个的Controller，其实这些Controller到底是什么玩意，不要怕，他们其实就是对Servlet做了一个封装，本质上还是一样一样的。
我们写一个Servlet，都需要去web.xml里面注册一下，否则就用不了。你安装一个QQ，注册表里面是不是肯定也需要注册一下啊，这不还是一样一样的吗？
好了，闲话不多说。我们来写一个小功能，也就是一个Servlet。
继承HttpServlet，同时改写doGet方法
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 MyServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("111");
}
}
里面我们先什么也不写。
接下来，我们要在web.xml里面把这个Servlet注册一下。
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<servlet>
<!-- 这里是servlet的名字 -->
<servlet-name>MyServlet</servlet-name>
<servlet-class>MyServlet</servlet-class>
<!-- 这里写servlet类在的包路径 -->
</servlet>
<servlet-mapping>
<!-- 这里是地址映射 -->
<servlet-name>MyServlet</servlet-name>
<!-- 这里写servlet映射地址 -->
<url-pattern>/MyServlet</url-pattern>
</servlet-mapping>
</web-app>
OK，Servlet注册完毕，我们先来访问一下这个功能。
重启tomcat。
访问：http://localhost/ajax/MyServlet
1.3 前台页面设计
服务器小程序已经差不多了，现在我们为了和服务器进行交互，就需要编写前台页面。这个页面也就是给用户看的。换言之，用户只能通过前台页面来访问我们的Servlet。
我们来写一个小案例，在页面上发送一句话到服务器，然后服务器给出一个回应就行了。
就是这么一个简单的案例，主要用来熟悉一下流程。
为了简单起见，我就不自己调css样式了，直接用bootstrap吧。
引入bootstrap的核心css文件。
然后，修改index.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">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
<title>Insert title here</title>
<style type="text/css">
.container {
margin-top:100px;
}
</style>
<script>
window.onload = function(){
var btn = document.getElementById("submit");
btn.onclick = function(){
alert();
}
};
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button id="submit" class="btn btn-default" type="button">提交</button>
</span>
</div>
</div>
</div>
</div>
</body>
</html>
页面效果：
1.4 基于get方式的数据请求
当我们点击提交按钮，就alert（）一下，如果成功的话，那么说明点击事件没有问题。然后，继续往下写代码。
如果是以往，我们都是通过form表单来进行提交的，可是这样的话，就会有一个问题，就是页面会刷新，而且代码也相对比较难懂。
自从ajax出来了之后，这种情况得到了巨大的改善，局部刷新技术在当时来看，还是非常不错的。
我先把实现代码给出：
btn.onclick = function(){
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("get","MyServlet?message="+document.getElementsByTagName("input")[0].value,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
};
}
同时修改一下MyServlet
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String msg = req.getParameter("message");
System.out.println(msg);
}
重启 tomcat ，访问index.jsp页面。
现在的浏览器一般都有调试功能，按一下F12，调试界面就出来了。然后，找到一个network，以谷歌浏览器为例
network视图会把所有的数据交互显示出来，包括引入的 js ， css文件，还有各种请求和回应，都会在这里显示出来。
比如，现在我刷新一下页面
我这么一刷新，首先服务器接收到的是这么一个 URL： http://localhost/ajax/index.jsp
这就是一个请求，服务器收到这个请求后，返回给我 index.jsp页面和bootstrap.min.css这个文件。
因为我在index.jsp的确引入过bootstrap.min.css，所以他也就一起加载进来了。
现在，我输入一句话，点击提交，看看会发生什么？
我们把input框里面的内容提交到服务器程序 MyServlet
控制台已经接受到了，这里比较幸运，没有遇到中文乱码的问题，那么先不管乱码了。
因为MyServlet中没有返回什么东西，所以alert出来的是空。
好的，那我们给浏览器也返回一句话吧。
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String msg = req.getParameter("message");
System.out.println(msg);
resp.setContentType("text/html;charset=utf-8");
PrintWriter out=resp.getWriter();
out.println("你好，这是服务器返回的信息！");
out.flush();
out.close();
}
再次点击提交按钮
OK了。
接下来，看一下请求的具体信息
在比对一下js代码，就一目了然了。
btn.onclick = function(){
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("get","MyServlet?message="+document.getElementsByTagName("input")[0].value,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
};
}
readyState:
0: 请求未初始化
1: 服务器连接已建立，还没发送
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
当 readyState 等于 4 且状态为 200 时，表示响应已就绪.
请求方式是get，并且只有当返回的状态码为200的时候，才会打印出responseText，这个就是对应的
out.println("你好，这是服务器返回的信息！");
这句话。
1.5 基于post方式的数据请求
get方法会在URL地址栏里显示你提交所带的值，post方法不会。所以，相对来说，post方法比较安全。
post方法在流程上和get方式差不多，我就直接上代码了:
window.onload = function(){
var btn = document.getElementById("submit");
btn.onclick = function(){
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("post","MyServlet",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var postData = {message : document.getElementsByTagName("input")[0].value};
var postDataStr = (function(obj){ // 转成post需要的字符串.
var str = "";
for(var prop in obj){
str += prop + "=" + obj[prop] + "&"
}
return str;
})(postData);
alert(postDataStr);
xhr.send(postDataStr);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
};
}
};
MyServlet.java
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 MyServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
String msg = req.getParameter("message");
System.out.println(msg);
resp.setContentType("text/html;charset=utf-8");
PrintWriter out=resp.getWriter();
out.println("你好，这是服务器返回的信息！");
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
个人博客地址：http://www.xiaotublog.com/index.html
首页：
详情页：
JavaScript ： 浅讲ajax的更多相关文章
- 浅讲ajax
1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器 ...
- javascript进阶之AJAX
AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...
- 【温故而知新-Javascript】使用 Ajax
Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XM ...
- 用javascript写原生ajax(笔记)
AJAX 的全名叫做 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...
- javascript实现原生ajax
自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...
- javascript实现原生ajax的几种方法介绍
自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...
- javascript 写一个ajax 自动拦截，并下载数据
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- JavaScript JSON 与 AJAX
JavaScript JSON 与 AJAX JSON 是一种轻量的数据交互格式,与 AJAX 配合完成前端页面与服务端的信息传递,本文介绍 JSON 的使用.原生 AJAX 写法.JSONP 跨域解 ...
- 浅谈JavaScript中的Ajax
引言 作为一名WEB开发者,我想Ajax技术是一定需要掌握的.你也许平时没有使用JavaScript真正的写过Ajax.但是你一定使用过JQuery里面的相关函数来进行异步调用.今天我们就来介绍下原生 ...
随机推荐
- Microservice Anti-patterns
在最近的一次Microservices Practitioner Summit中,原Netflix工程师介绍了一种越来越常见的对Microservice的误用.简单地说,大家在搭建一个基于Micros ...
- 《Django By Example》第一章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...
- python爬取github数据
爬虫流程 在上周写完用scrapy爬去知乎用户信息的爬虫之后,github上star个数一下就在公司小组内部排的上名次了,我还信誓旦旦的跟上级吹牛皮说如果再写一个,都不好意思和你再提star了,怕你们 ...
- 【Web动画】SVG 实现复杂线条动画
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...
- angular2系列教程（七）Injectable、Promise、Interface、使用服务
今天我们要讲的ng2的service这个概念,和ng1一样,service通常用于发送http请求,但其实你可以在里面封装任何你想封装的方法,有时候控制器之间的通讯也是依靠service来完成的,让我 ...
- 关于Raid0,Raid1,Raid5,Raid10的总结
RAID0 定义: RAID 0又称为Stripe或Striping,它代表了所有RAID级别中最高的存储性能.RAID 0提高存储性能的原理是把连续的数据分散到多个磁盘上存取,这样,系统有数据请求就 ...
- PHP中PDO事务的使用方法
事务 (Transaction) 是操作数据库中很重要的一个功能, 它可以让你预定一条, 或者一系列 SQL 语句, 然后一起执行. 在执行的过程中, 如果其中的某条执行失败, 可以回滚所有已更改的操 ...
- UVa 122 Trees on the level
题目的意思: 输入很多个节点,包括路径和数值,但是不一定这些全部可以构成一棵树,问题就是判断所给的能否构成一棵树,且没有多余. 网上其他大神已经给出了题目意思:比如我一直很喜欢的小白菜又菜的博客 说一 ...
- （资源整理）带你入门Spark
一.Spark简介: 以下是百度百科对Spark的介绍: Spark 是一种与 Hadoop 相似的开源集群计算环境,但是两者之间还存在一些不同之处,这些有用的不同之处使 Spark 在某些工作负载方 ...
- Storm介绍(一)
作者:Jack47 PS:如果喜欢我写的文章,欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 内容简介 本文是Storm系列之一,介绍了Storm的起源,Storm ...