加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Ajax

发布时间:2020-12-15 21:32:18 所属栏目:百科 来源:网络整理
导读:AJAX 即 “ A synchronous J avascript A nd X ML ” (异步 JavaScript 和 XML ),是指一种创建交互式 网页 应用的网页开发技术。 AJAX = 异步 JavaScript 和 XML ( 标准通用标记语言 的子集)。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服

AJAXAsynchronousJavascriptAndXML(异步JavaScriptXML),是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步JavaScriptXML标准通用标记语言的子集)。

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

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

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

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

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

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

Ajax应用程序所用到的基本技术:
·HTML 用于建立 Web表单并确定应用程序其他部分使用的字段。

·JavaScript 代码是运行 Ajax应用程序的核心代码,帮助改进与服务器应用程序的通信。

·DHTML Dynamic HTML,用于动态更新表单。我们将使用divspan和其他动态 HTML元素来标记HTML

·文档对象模型 DOM用于(通过JavaScript代码)处理结构和(某些情况下)服务器返回的 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.JSONc.加载JavaScript文件;d.加载XML文件。

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

3.动态提交表单

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

在网站网页上常见到的:

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,IOException { } }

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读