AJAX：Asynchronous JavaScript AND XML

定义：浏览器向服务器发送的异步请求（不改变页面的情况下，发送的变化）

核心：浏览器向服务器发送异步请求，javascript中提供xmlHttpRequest对象，这个是核心对象，来发送异步请求

最简写法： jQuery

书写ajax的步骤：
       1，创建对象： new xmlHttpRequest（）；
       2，初始化参数 open（"get/post","url","true"）
       3, 发送请求 send（data）
get/post

xmlHttpRequest存在不同的状态码
       0-----4
       0：创建(new)之后
       1：连接初始化之后 open之后
       2：发送请求之后
       3，服务器正在处理
       4，当服务器将结果响应到浏览器中

直接看例子

我们实现功能：注册账号时，检查账号在数据库中是否存在，并异步刷新出提示信息。（因为只是展示下Ajax，为了简便，直接在Servlet中写死账号为“aaa”，若注册账号为aaa，不能注册，其余情况可以注册）

一、最原始的写法：

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）</title><script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head><body>账号(get)：<input type="text" name="username" id="username"/><span id="uinfo"> </span><br/><br/>账号(post)：<input type="text" name="username" id="username1"/><span id="uinfo1"> </span><br/><br/><input type="button" value="同步提交" id="button" /> <script type="text/javascript">//同步提交$("#button").click(function(){window.location.href="ajax.do";});//get提交$("#username").blur(function(){//取到文本框里面的值（账号）var username = $("#username").val();//创建异步提交对象var xhr= new XMLHttpRequest();//初始化连接xhr.open("GET","ajax.do?username="+username,true);//发送请求xhr.send(null);//状态的改变事件xhr.onreadystatechange=function(){//处理响应结果if(xhr.readyState==4){//得到响应的结果var result = xhr.responseText;if (result=="0") {//找到id=uinfo---加内容进去$("#uinfo").html("该账号已经存在！")//找到id=uinfo---改掉字体的颜色$("#uinfo").css("color","red");} else{$("#uinfo").html("可以注册！")$("#uinfo").css("color","green");}}}});//post$("#username1").blur(function(){//取到文本框里面的值（账号）var username1=$("#username1").val();//创建异步提交对象var xhr= new XMLHttpRequest();//初始化连接xhr.open("post","ajax.do",true);//post提交，要添加请求头xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");//发送请求xhr.send("username="+username1);//状态的改变事件   xhr.onreadystatechange=function(){//处理响应结果if(xhr.readyState==4){//得到响应的结果var result=    xhr.responseText;if (result=="0") {$("#uinfo1").html("该账号已经存在！")$("#uinfo1").css("color","red");} else{$("#uinfo1").html("可以注册！")$("#uinfo1").css("color","green");}}}});</script></body>
</html>

java代码：

package com.ajia.servlet;import java.io.IOException;
import java.io.PrintWriter;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("/ajax.do")
public class AjaxServlet02  extends HttpServlet{@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String username=request.getParameter("username");//响应到页面中去PrintWriter out=response.getWriter();if ("aaa".equals(username)) {out.print(0);}else {out.print(1);}}}

Servlet中，账号存在返回0，否则返回1。jsp中根据返回值进行异步刷新。

jsp中使用的是blur事件，即输入后，用鼠标点击一下该输入框外（输入框失去焦点），信息立即刷新出来。

若是同步提交，则会直接跳转到Servlet的地址；异步提交的话地址不会变。

结果如下：

同步提交：

异步提交：

二、最常用的写法

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）</title><script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head><body>账号(get)：<input type="text" name="username" id="username"/><span id="uinfo"> </span><br/><br/>账号(post)：<input type="text" name="username" id="username1"/><span id="uinfo1"> </span><br/><br/><script type="text/javascript">//get方式$("#username").blur(function(){//取到文本框里面的值（账号）var username = $("#username").val();$.ajax({type: 'GET',url: 'ajax.do?username='+username,success: function(data){if (data=="0") {//找到id=uinfo---加内容进去$("#uinfo").html("该账号已经存在！")//找到id=uinfo---改掉字体的颜色$("#uinfo").css("color","red");} else{$("#uinfo").html("可以注册！")$("#uinfo").css("color","green");}},error: function(msg){alert("提交失败!");}});});//post方式$("#username1").blur(function(){//取到文本框里面的值（账号）var username = $("#username1").val();$.ajax({type: 'POST',url: 'ajax.do',data: {'username':username},dataType:'json',success: function(data){if (data=="0") {//找到id=uinfo---加内容进去$("#uinfo1").html("该账号已经存在！")//找到id=uinfo---改掉字体的颜色$("#uinfo1").css("color","red");} else{$("#uinfo1").html("可以注册！")$("#uinfo1").css("color","green");}},error: function(msg){alert("提交失败!");}});});</script></body>
</html>

java代码不变，还是之前那个。

运行结果：

这样的写法是不是简洁了很多呢，也很直观易懂。

多说一点，json的写法：

{key:value，key:value} （需要打引号）

可以看到，Ajax方法内就使用的json写法，同时data后面也是用的json。

如果要用到json数组，直接在最外面加中括号[]

三、最简单的写法

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）</title><script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head><body>账号(get)：<input type="text" name="username" id="username"/><span id="uinfo"> </span><br/><br/>账号(post)：<input type="text" name="username" id="username1"/><span id="uinfo1"> </span><br/><br/><script type="text/javascript">//get提交$("#username").blur(function(){//取到文本框里面的值（账号）var username = $("#username").val();$.get("ajax.do?username="+username, function(data) {if (data=="0") {//找到id=uinfo---加内容进去$("#uinfo").html("该账号已经存在！")//找到id=uinfo---改掉字体的颜色$("#uinfo").css("color","red");} else{$("#uinfo").html("可以注册！")$("#uinfo").css("color","green");}});});//post提交$("#username1").blur(function(){//取到文本框里面的值（账号）var username = $("#username1").val();$.post("ajax.do",{'username':username}, function(data) {if (data=="0") {//找到id=uinfo---加内容进去$("#uinfo1").html("该账号已经存在！")//找到id=uinfo---改掉字体的颜色$("#uinfo1").css("color","red");} else{$("#uinfo1").html("可以注册！")$("#uinfo1").css("color","green");}});});</script></body>
</html>

运行结果：

第三种写法实际上就是用$post或者$get，然后直接写入内容。

比较：第二种写法是以键值对方式写入参数，第三种就是直接写参数，语法如下：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

总结：

最后总结一下，我们一般用第二种写法，看起来更直白易懂。

另外，后面两种要记得引入jQuery库哦

在jQuery里，如果不写type，默认均以get方式提交；dataType可以不用写，因为它默认执行智能判断（xml、json、script 或 html）。

还有，我们这里的Servlet写得比较简单，只是用PrintWriter的实例直接向前台输出，前台获取返回值进行处理。后续如果要从数据库读数据并进行处理的话，直接在Servlet中编写相应代码就行，前台需要进行一些处理的话也可以直接在回调函数success()中写入相应代码就行，整个Ajax的大体流程就是这样，非常简单，又十分好用。

注：jQuery提供的函数非常好用，但不要忘记Ajax的本源哦，它是使用xmlHttpRequest对象来发送请求的；

还有，后续可能会遇到跨域问题，jQuery中可以这样解决： dataType:"jsonp"

但是注意，解决跨域问题的是jsonp，不是Ajax，只是jQuery将其封装到了Ajax里。

----------------------------------------

欢迎关注公众号“编程江湖”，可以领取Java、Python、微信小程序等诸多学习资料和项目源码，还能查看精品技术文章，并给大家提供了CSDN资源下载服务。

Ajax的三种写法（最原始的写法+最常用的写法+最简便的写法）相关推荐

dropdownlist ajax联动,asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例...
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级 ...
c .net ajax,Asp.net mvc 2中使用Ajax的三种方式
在Asp.net MVC中,我们能非常方便的使用Ajax.这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用.Jquery.Ajax Helper.分别采用这三种方式结合asp.net m ...
ajax的三种方法以及ajax概念
目录 Ajax技术主要包括: 1.客户端脚本语言:JavaScript 2.异步数据获取技术:XMLHttpRequest 3.数据交换和操作技术:XML和XSTL 4.动态显示和交互技术DOM及基于 ...
python selenium 等待页面加载_python selenium 三种等待方式详解（实战常用）
引言: 当你觉得你的定位没有问题,但是却直接报了元素不可见,那你就可以考虑是不是因为程序运行太快或者页面加载太慢造成了元素不可见,那就必须要加等待了,等待元素可见再继续运行程序: 注:当使用该放发的时 ...
html中常用的三种列表,在html语言中，常用的列表有哪三种
常用的列表有:1.有序列表,项包含在li标签对中,以ol定义:2.无序列表,项包含在li标签对中,以ul定义:3.自定列表,项包含在dt标签对中," "与定义项对应的每个定义,自定 ...
php js对话框,JavaScript_js弹出框、对话框、提示框、弹窗实现方法总结(推荐)，一、JS的三种最常见的对话框- phpStudy...
js弹出框.对话框.提示框.弹窗实现方法总结(推荐) 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ==================== ...
vue项目的三种开发模式
vue项目的三种开发方式文章目录 vue项目的三种开发方式 1.原始无合作开发 2.手动模块化开发 3.自动模块化开发 1.开发流程 2.配置webpack-dev-server 1.下载安装包 2 ...
JS标签的获取、js curd、事件的四要素、事件的三种注册方式和区别
1.掌握html和body标签的两种特殊获取方式(*****)---(重点) html: document.documentElement body: document.body le ...
伴随诊断试剂的三种开发路径
伴随诊断试剂的三种开发路径 1.伴随诊断试剂的三种开发路径 2.美国的常用方式 3.我国的发展趋势前提资料: 国家药品监督管理局医疗器械技术审评中心(CMDE): 国家药监局(NMPA): ...
测绘用计算机吗,三种测量仪器使用详解，测绘人必须要知道
原标题:三种测量仪器使用详解,测绘人必须要知道水准仪及其使用方法高程测量是测绘地形图的基本工作之一,另外大量的工程.建筑施工也必须量测地面高程,利用水准仪进行水准测量是精密测量高程的主要方法,具体 ...

Ajax的三种写法（最原始的写法+最常用的写法+最简便的写法）

一、最原始的写法：

二、最常用的写法

三、最简单的写法

总结：

Ajax的三种写法（最原始的写法+最常用的写法+最简便的写法）相关推荐

最新文章

热门文章