Ajax

最新推荐文章于 2025-03-16 10:00:00 发布

ljheee

最新推荐文章于 2025-03-16 10:00:00 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web 文章标签： ajax 异步

本文链接：https://blog.youkuaiyun.com/ljheee/article/details/51730508

web 专栏收录该内容

6 篇文章

订阅专栏

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

Ajax 的核心是 JavaScript对象 XMLHttpRequest。XMLHttpRequest是一个浏览器内置对象，最初不同浏览器支持并不相同。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使我们可以使用 JavaScript向服务器提出请求并处理响应，而不阻塞用户。

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。AJAX在浏览器与 Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

其优势不言而喻：既可以减少用户流量，因为传输数据少，提高用户体验，也是程序更友好。

Ajax应用程序所用到的基本技术：
·HTML 用于建立 Web表单并确定应用程序其他部分使用的字段。
·JavaScript 代码是运行 Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。
·DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用div、span和其他动态 HTML元素来标记HTML。
·文档对象模型 DOM用于（通过JavaScript代码）处理 HTML结构和（某些情况下）服务器返回的 XML。

简单地说----就是“老技术，新技巧”。

jQuery AJAX 方法

$.ajax()	执行异步 AJAX 请求
$.ajaxPrefilter()	在每个请求发送之前且被 $.ajax()处理之前，处理自定义 Ajax选项或修改已存在选项
$.ajaxSetup()	为将来的 AJAX 请求设置默认值
$.ajaxTransport()	创建处理 Ajax 数据实际传送的对象
$.get()	使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript()	使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param()	创建数组或对象的序列化表示形式（可用于 AJAX请求的 URL 查询字符串）
$.post()	使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete()	规定 AJAX 请求完成时运行的函数
ajaxError()	规定 AJAX 请求失败时运行的函数
ajaxSend()	规定 AJAX 请求发送之前运行的函数
ajaxStart()	规定第一个 AJAX 请求开始时运行的函数
ajaxStop()	规定所有的 AJAX 请求完成时运行的函数
ajaxSuccess()	规定 AJAX 请求成功完成时运行的函数
load()	从服务器加载数据，并把返回的数据放置到指定的元素中
serialize()	编码表单元素集为字符串以便提交
serializeArray()	编码表单元素集为 names 和 values 的数组

Ajax应用

1.基于请求加载文件数据

加载数据的类型归类为以下四种：a.加载HTML文件；b.加载JSON文件；c.加载JavaScript文件；d.加载XML文件。

2.基于Get方法向服务器获取数据

3.动态提交表单

通过jQuery的AJAX支持，可以让我们很方便的动态提交表单而不用刷新页面。

在网站网页上常见到的：

1、用户注册，异步检测用户名是否存在。

2、在同一个页面，“加载更多”。

这里是一个用户注册，用Ajax异步判断是否用户名存在：https://github.com/ljheee/UserRegister-Ajax-

index.html

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//$ 是jquery的缩写

$(document).ready(function(){
$('#username').blur(function(){//当id=username的输入框，失去焦点，则触发
// alert($(this).val());
// $.get(url,data,callback,dataType);
$.get("/UserRegister_Ajax/user",
{u:$(this).val(), //发送到url的数据
o:'end'},
function(data){
$('#userLabel').text(data);
});
});
});

</script>

</head>
<body>

<form action="">
<div>
<label> 昵称</label>
<input type="text" id="username" name="username" placeholder="enter username" required="required" />
<label id="userLabel"> </label>
</div>

<div>
<label> 其他</label>
<input name="other" placeholder="other" />
</div>

</form>

</body>
</html>

一个自定义servlet类，处理用户请求-----------------------------------------------------------------------------------------------

package com.ljheee.ajax;

import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class UserServlet
*/
@WebServlet("/user")
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

//需要修改。不支持多线程修改list数据，同时读问题不大。Victor是线程安全的。
private ArrayList<String> users = new ArrayList<>();

@Override
public void init(ServletConfig config) throws ServletException {
super.init(config);

//模拟数据库，查询所有用户名---准备匹配
users.add("root");
users.add("ljh");
users.add("admin");
}
/**
*
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("u");
String other = request.getParameter("o");

String msg = "可用";
if(users.contains(name)){
msg = "不可用";
}

//发送数据
response.setCharacterEncoding("UTF-8");
response.getWriter().write(msg);//发送数据,到浏览器内部，发送到请求页面

}

/**
*
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}

}