JavaWeb = Ajax使用详解

最新推荐文章于 2024-04-23 00:29:43 发布

hnbyboy

最新推荐文章于 2024-04-23 00:29:43 发布

阅读量521

点赞数

分类专栏： JavaWeb 文章标签： js ajax

本文链接：https://blog.csdn.net/appandroid/article/details/105450887

版权

Ajax的全称是：Asynchronous JavaScript And XML，指的是异步 JavaScript 及 XML（其实主要用的就是javascript技术），它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。 Ajax的特点是异步，比如可以使用Ajax更新局部网页、使用Ajax在不刷新页面的情况下查询数据、验证用户注册的用户名是否唯一等。

一.Ajax

1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML

AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）

它不是一门编程语言，而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。

对于传统的网页，如果想更新内容，那么必须要刷新整个页面，但有了Ajax，便可以在页面不被全部刷新的情况下更新其内容。在这个过程中，页面实际上是在后台与服务器进行了数据交互，获得数据之后，再利用JavaScript改变页面，这样页面内容就会更新了。（微博页面加载过程的例子，加载一会下方才会出现内容，这其实就是Ajax加载的过程。）

简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

1. 异步和同步：客户端和服务器端相互通信的基础上

客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
提升用户的体验

2.Ajax的关键元素：

JavaScript语言：Ajax技术的主要开发语言；
XML / SON / HTML等：用来封装请求或响应的数据格式；
DOM文档对象模型：通过 DOM 属性或方法修改页面元素，实现页面局部刷新；
CSS：改变样式，美化页面效果，提升用户体验度；
Ajax 引擎：即 XMLHttpRequest 对象，以异步方式在客户端与服务器端之间传递数据

3.实现方式：

原生方式与jQuery方式：

1. 创建ajax对象
		let xhr = new XMLHttpRequest();

2. 告诉ajax请求方式和请求地址
		xhr.open(请求方式，请求地址);

3. 发送请求
		xhr.send();

4. 获取服务器返回的数据
		xhr.onload=function(){
            xhr.responseText;
		}


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>js的原生ajax</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"> <span id="userwarn"></span>

<script>
    document.getElementById('username').onblur=function () {
        console.log(this.value);
        // 1.创建ajax对象
        let xhr = new XMLHttpRequest();
        // 2.告诉ajax请求方式和请求地址
        xhr.open('get','http://localhost:8080/check?username='+this.value)
        // 3.发送请求
        xhr.send();
        // 4.获取服务器返回数据
        xhr.onload=function () {
            console.log(xhr.responseText);// 返回的字符串
            document.getElementById('userwarn').innerText=xhr.responseText;
        }
    }
</script>
</body>
</html>

JQuery的Ajax插件

* 语法：
		$.ajax({name:value,name:value})
	
* 参数：
		url:请求地址
		type：请求方式  （get：大小有限制、post：大小没有限制）
		data：请求参数
		success：请求成功时，执行的回调函数
		-------
		error：请求失败时，执行的回调函数
		dataType：预期服务器返回的数据类型：text、json


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jq的ajax函数</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"><span id="userwarn"></span>

<script>
    // 给文本框绑定失去焦点事件
    $('#username').blur(function () {
        // 使用ajax函数发送请求
        $.ajax({
            url:"http://localhost:8080/check",
            type:"post",
            data:"username="+$(thi

最低0.47元/天解锁文章

hnbyboy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb = Ajax使用详解

Ajax的全称是：Asynchronous JavaScript And XML，指的是异步 JavaScript 及 XML（其实主要用的就是javascript技术），它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。 Ajax的特点是异步，比如可以使用Ajax更新局部网页、使用Ajax在不刷新页面的情况下查询数据、验证用户注册的用户名是否唯一等。...
复制链接

扫一扫