ajax coap_[AJAX] -AJAX,你要学的,都在这儿(封装ajax+使用jQuery.ajax)

案例1,注册页面时,提示用户名被占用

思路:

1、用户书写用户名信息，在失去焦点时进行用户校验

2、失去焦点发送请求到服务器,服务器根据用户名信息去数据库中查询该用户名是否存在

3、将校验结果响应给客户端

4、在当前页面，也就用户名输入框后显示提示语

技术:

使用ajax技术

一般是需要先进行格式校验的，但这里仅演示校验是否是否注册用户名被占用

jsp页面

<%

UserServlet

package 

UserService

package 

UserServiceimpl

package 

UserMapper

package 

UserMapper.xml

<?xml version="1.0" encoding="UTF-8"?>

---

个人封装ajax

纵观上面的ajax的流程书写我们可以发现是有许多东西可以提取的,提取后完全可以降低我们书写的重复冗余代码,实际上这里是可以不用看的,因为jQuery中有人比我们封装的更好,但是还是要领会一下封装的精髓-有复制粘贴的冲动的时候,就可以进行封装了

封装的js

/*

页面引用

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>

---

上面已经介绍了一下自己封装ajax的流程,那这里呢就开始介绍学习jQuery中为我们封装的ajax,我们自己封装的不是不好,而是考虑的没有有多年工作经验的别人封装的好,所以既然有更好的工具,为什么不能拿来用呢?

jquery是js的一个轻量型框架，已经将jis创建的操作进行了封装，而ajax也是js的一部分，所以jQuery也已经将ajax进行了封装。

jQuery对ajax有很好的支持, 分为三个层次:

> 第一级别: $.ajax: 最基本的封装

> 第二级别:

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

• $.get(url,data,fun)

示例:

url:请求地址

data:请求参数,参数格式为json对象

fun:回调函数,主义要声明一个形参,用来接收响应数据

  $.get("register",{uname:$("#uname").val()},function (data) {
                  
                })

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

• $.post(url,data,fun)

示例:

url:请求地址

data:请求参数,参数格式为json对象

fun:回调函数,注意要声明一个形参,用来接收响应数据

 $.post("register",{uname:$("#uname").val()},function (data) {
                  
                })

• $.getJSON(json格式参数)

参照api吧- -

> 第三级别: obj.load

如果有特殊的订制要求，可以使用。
jQuery.ajax()

使用jQuery封装的ajax写的页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>

写法代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>