AJAX基本用法

在工作中和一些大项目制作的时候，许多人都会选择使用前后端分离技术即AJAX进行项目的制作，使用AJAX不仅能提高效率而且更容易修改，使我们制作项目的时候更加的得心应手。

在此给大家讲解一下AJAX的用法，一共有五个核心内容，掌握了这五个方面就掌握了AJAX技术的使用。

AJAX五个核心属性分别是url, type, data, dataType, success这五个方面.

@1： url 目标地址（对应后台的Servlet地址）
@2： type 使用方法的类型（post和get两种）
@3： data 内容（向目标地址发送的内容）
@4： dataType 文本类型（一般使用text和json）
@5： success 成功之后的操作

解释说明：get和post在形式上和性能上的差异
▪ post传输数据时，不需要在URL中显示出来，而get方法要在URL中显示。
▪ post传输的数据量大，可以达到2M，而get方法由于受到URL长度的限制,只能传递大约1024字节.
▪ post是为了将数据传送到服务器段,get是为了从服务器段取得数据。当然get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据，post的信息作为http请求的内容，而get是在Http头部传输的。

下面详细讲解一下用法

先看一下总体结构

		$.ajax({url:"http://localhost:8080/Ajax/login",type:"post",data:{name:name,pwd:pwd},dataType:"text",success:function(data){alert(data);}});

分步详解

url指向目标网址为http://localhost:8080/Ajax/login的一个Servlet

url:"http://localhost:8080/Ajax/login"

使用post方法发送

type:"post"

发送的内容有账号和密码

data:{name:name,pwd:pwd}

使用text文本

dataType:"text"

成功之后弹窗显示

success:function(data){alert(data);}

看了上述五个核心属性你还可以了解一下如下AJAX小案例，帮助你更快更好运用。

AJAX参考小案例

没有输入任何内容时
在这里插入图片描述
都输入内容时

前端代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery.js"></script></head><style>#login{width: 100px;height: 30px;margin: 20px 50px;border: 2px solid greenyellow;border-radius: 10px;}</style><body>账号:<input type="text" name="name" id="name" /><br>密码:<input type="password" name="pwd" id="pwd" /><br /><input type="button" value="登陆" id="login" /></body><script>$(function(){$(":button").on("click",function(){var name = $("#name").val();var pwd = $("#pwd").val();$.ajax({url:"http://localhost:8080/Ajax/login",type:"post",data:{name:name,pwd:pwd},dataType:"text",success:function(data){alert(data);}});});});</script>
</html>

后台代码展示

package 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 LoginServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");String name = request.getParameter("name");String pwd = request.getParameter("pwd");response.setContentType("text/html");//解决跨域问题response.setHeader("Access-Control-Allow-Origin", "*");PrintWriter out = response.getWriter();System.out.println(request.getRemoteAddr()+"/"+name+":"+pwd);if(name != null && pwd != null && !"".equals(name) && !"".equals(pwd)){out.print("ok");}else{out.print("error");}out.flush();out.close();}}