关于Ajax

最新推荐文章于 2023-05-11 13:54:17 发布
最新推荐文章于 2023-05-11 13:54:17 发布
阅读量471 收藏
点赞数
文章标签： ajax javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61645269/article/details/120476416
版权
本文详细介绍了Ajax技术，包括异步的概念、JavaScript在Ajax中的作用、XML/JSON数据格式以及Ajax的工作原理。重点讲解了XMLHttpRequest对象的使用，包括onreadystatechange事件、readyState属性、status属性、responseText属性以及open和send方法。同时阐述了使用XHR发送异步请求的五个步骤，帮助读者深入理解Ajax如何实现页面局部刷新和提升用户体验。
摘要由CSDN通过智能技术生成

1.Ajax是什么

    Ajax是指异步JavaScript和XML(Asynchronous JavaScript And XML)

    Ajax不是一个新的语言，是对所学技术整合的应用

    使用Ajax是为了实现异步请求，实现页面局部刷新，为了提升用户体验

1.1什么是异步

          区分异步和同步

          同步:  

         一个执行完成另一个才能开始执行

         当浏览器向服务器发送请求时，要接收服务器发送回来的响应。在这个时间中，浏览器不能做其他工作。

         如果服务器没有发回响应，浏览器是白屏

<a href="demo1.do">普通请求</a><br>

         异步:

         两个可以同时执行

         当浏览器向服务器发送请求时，要接收服务器发送回来的响应。在这个时间中，浏览器可以做其他工作。

        如果服务器没有发回响应，浏览器可以继续浏览页面内容

<a href="javascript:toajax()">ajax异步请求</a>

function toajax(){

    createXHR();

    xhr.onreadystatechange = callback;

    xhr.open("GET", "${pageContext.request.contextPath}/demo1.do");

    xhr.send(null);

}

function callback(){

@WebServlet("/demo1.do")

public class Demo1Controller extends HttpServlet {

    private static final long serialVersionUID = 1L;

      

    protected void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         System.out.println("被调用了一次!");

    }

1.2javascript

       js是ajax的核心

       普通方式是由浏览器向服务器发送请求

       Ajax是在js中，由js的对象向服务器发送请求

   1.3 XML/JSON

     使用ajax时，在页面上都是进行局部刷新

     使用ajax进行局部刷新时，一般都会返回数据

     现在基本上返回的都是数据，而数据要有相应的表示格式。

        我们以前使用XML作为数据传递对象

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

<students>

    <student id="1">

         <name>th</name>

         <age>20</age>

         <sex>M</sex>

    </student>

    <student id="2">

         <name>lx</name>

         <age>20</age>

         <sex>M</sex>

    </student>

</students>

       现在使用JSON表示数据

[{"id":1, "name":"th", "age":20, "sex":"M"},{"id":2, "name":"lx", "age":20, "sex":"M"}]

 2.必须记住的几句话

 2.1 请求和响应都是纯文本

 2.2 一个请求对应一个响应

 2.3 针对一个资源的请求，响应内容一致

 2.4 ajax是使用JavaScript发送的异步请求

 2.5 谁发的请求，谁来接响应

 3.Ajax的工作原理

     Ajax使用js中的xhr对象向服务器发送异步请求，js中的xhr对象接收服务器发回的响应

    1，2 在浏览器端使用事件调用方式调用js，在js中创建xhr对象

    3 由xhr对象向服务器发送请求

    4 服务器实现功能

    5 服务器将响应内容发送给js中的xhr对象

    6 响应回来后通过js代码才能影响浏览器的页面展示

    注意:ajax整个工作流程中，只使用一个XHR-XMLHttpRequest对象

4 .关于XMLHttpRequest对象

    在ajax应用时，就是使用js中的xhr对象实现异步请求，就是使用xhr对象的属性，事件，方法

4.1 onreadystatechange事件

    表示xhr对象状态改变的事件

    在js中注册事件函数:   xhr.onreadystatechange = fn;

    在整个ajax过程中，xhr对象的状态会发生多次的改变。

4.2 readyState属性

    表示xhr对象状态的属性

    xhr对象在整个过程中，状态会发生多次的改变，但是只有在状态4时，才能正常使用

    4表示完成，请求/响应完成。

    状态描述:

    0   请求尚未初始化      (在调用open()之前)

    1   请求已提出           (在调用send()之前)

    2   请求已发送           (这里通常可以从响应中得到头部内容)

    3   请求处理中           (响应中通常有部分数据可用，但是服务器还没有完成响应)

    4   请求已完成           (可以访问服务器响应并使用它)

4.3 status属性

    表示xhr对象接收的响应状态码

    404 没找到资源

    500 服务器发生了错误

    200 success

4.4 responseText属性

    表示xhr对象的响应文本

4.5 open(method, url)方法

    Xhr对象的open方法表示创建一个请求

    method:请求方式

    url:请求的路径

4.6 send()方法

    Xhr对象的send方法表示发送请求

    xhr.send(null);

    send方法的参数，请求时的请求参数

5. 使用XHR发送异步请求的步骤

5.1 创建XHR对象

    针对不同的浏览器，创建方式不一样

<script type="text/javascript">

         var xhr = null;

         function createXHR(){

             if(window.ActiveXObject){

                  xhr = new ActiveXObject("Microsoft.XMLHTTP");

             }else if(window.XMLHttpRequest){

                  xhr = new XMLHttpRequest();

             }else{

                  alert("can't create xhr object!");

             }

         }

5.2在html页面上找到一个事件调用发送请求的函数 

<body>

    <button onclick="toajax()">ajax请求</button>…….

5.3配置一个回调函数 

    xhr对象是否接收了响应，如何判断?onreadystatechange事件

    xhr.onreadystatechange = 回调函数;

function toajax(){

             createXHR();

             xhr.onreadystatechange = callback;

            

}

5.4写回调函数:影响页面的显示效果

function callback(){

             if(xhr.readyState == 4){

                  if(xhr.status == 200){

                      var responseText = xhr.responseText;

                      alert(responseText);

                  }

             }

         }

5.5向服务器发送请求

function toajax(){

    createXHR();

    xhr.onreadystatechange = callback;

    xhr.open("GET","${pageContext.request.contextPath}/index.jsp");

    xhr.send(null);

}

    

五公里在路上丶
关注
toAjax:阻止常规表单操作并使用 AJAX 的 jQuery 插件
06-25
到阿贾克斯 阻止常规表单操作并使用 AJAX 的 jQuery 插件。 为什么我决定想出这个插件？ 编码是关于优化的。 这个插件节省了我的时间，并允许更干净的 html 输出（更少的代码）。 这个插件是如何工作的？ 对于您使用此插件的每个表单，都会发生以下步骤： 收集表单参数（动作、方法...） 对于每个字段，收集值和名称属性。 验证每个字段（如果需要且为空，请通知用户关注该字段） 将每个值和名称存储在对象中。 防止默认操作（单击表单的提交按钮时） 使用收集的数据执行 AJAX 请求 触发失败功能的成功 但这里是令人敬畏的部分...... 您可以为每个表单创建单独的成功和失败函数。 要做到这一点，只需根据以下模型命名，将一个新函数附加到 functions_success 或 functions_fail 中： 'TOAJAX_' + 表单的 id var fu
javascript to ajax(一)
梅晓强
05-25 1352
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX 基于 Web 标准AJAX 基于下列 Web 标准：JavaScriptXMLHTMLCSS在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。 Deaf
toAjax（）大约6小时49分钟
cunbei2644的博客
09-27 1225
A funny thing - today I found out that there is the Town of Ajax, a city near Toronto, in my neighbouring Canadian province, Ontario (I'm in Quebec). It would take me about 6 hours 49 mins to get ther...
关于AJAX的使用方法
ML的博客
07-26 431
1.url:  要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type:  要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout:  要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的
An Introduction To Ajax
03-05
DWR-SPRING DEMO 博文链接：https://eric2007.iteye.com/blog/210344
浅析IE浏览器关于ajax的缓存机制
01-19
因为，在默认情况下，IE会缓存ajax的请求结果。对于同一个URL地址，在缓存过期之前，只有第一次请求会真正发送到服务端。大多数情况下，我们使用ajax是希望实现局部刷新的，所以这就牵扯到一个改进的问题。 　如果想...
关于Ajax应用的课堂教学设计.pdf
最新发布
01-03
它在 Web 前端开发技术课程中扮演着重要角色，但是在教学过程中存在一些问题，如教材中关于 Ajax 应用的部分内容太少、Ajax 原理难理解、理论与实践脱节等。为了提高 Ajax 应用的教学效果，需要教师熟悉教学内容，有...
关于Ajax的原理以及代码封装详解
12-11
本文主要给大家介绍了关于Ajax原理以及代码封装的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 示例代码 var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox,...
关于Ajax的架构介绍及解决方案
10-22
【Ajax架构介绍】 Ajax（Asynchronous JavaScript and XML）是一种用于创建快速、动态网页的技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验，...
关于ajax网络请求的封装实例
12-10
本文将详细介绍一个关于Ajax网络请求的封装实例，帮助开发者更好地理解和使用Ajax。 首先，我们来看封装的Ajax网络请求函数： ```javascript function AJAX(obj) { // ... if (obj.dataType == "jsonp") { // ....
phpToAjax-开源
07-06
生成 html 和 Java 脚本代码以在 WEB 中实现 AJAX 的 PHP 类 西班牙语：生成 html 和 Java 脚本代码以在 WEB 中实现 Ajax 的 PHP 类。
Ajax方法
XJ_TK的博客
03-09 900
Ajax方法 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： JQ 作者：胡水旺 撰写时间：2021/7/18 一、jQuery-Ajax 方法 AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现对部分网页的更新。 1、简介 Ajax=异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
AJAX教程
liu_to_liu的博客
06-02 304
AJAX教程1、AJAX1.1 全局刷新和局部刷新1.1.1 全局刷新1.1.2 局部刷新1.1.2.1 异步请求对象1.1.2.2 什么是Ajax2、AJAX 异步实现步骤2.1 创建对象方式2.2 onreadstatechange 事件 1、AJAX 1.1 全局刷新和局部刷新 1.1.1 全局刷新 1.1.2 局部刷新 1.1.2.1 异步请求对象 1.1.2.2 什么是Ajax 2、AJAX 异步实现步骤 2.1 创建对象方式 var xmlHttp = new XMLHttpR
Ajax简介
shldh的博客
05-11 5228
字符串：{"name":"userGroup","users":[{"password":"123123","username":"zhangsan"},{"password":"321321","username":"lisi"}]}//结果是 '{"a": "Hello", "b": "World"}'集合转json串：[{"password":"123456","username":"zhangsan"},{"password":"000","username":"lisi"}]
Ajax中的四个方法
Argonaut_的博客
02-20 1156
在前面我们学过 get 方法，这里的 get 就是 GET 请求的意思，JSON 就是 JSON 编码了，把两个词合起来理解就是使用 GET 请求从服务器加载 JSON 格式的数据。// 如果链接失效，可以试试 https://labfile.oss.aliyuncs.com/courses/3774/posts.json。// 如地址失效，可以使用 https://labfile.oss.aliyuncs.com/courses/3774/users.json。
Ajax概述及使用
weixin_54685622的博客
03-28 1180
Ajax 技术应用 Ajax 技术简介 背景 在互联网高速发展的今天，传统的WEB应用，对于高并发、高性能、高可靠性的要求已迫在眉睫。单线程方式的客户端与服务端交互方式已经不能满足现阶段的需求.我们需要以异步、按需加载的方式从服务端获取数据并及时刷新，来提高用户体验，于是Ajax技术诞生。 Ajax 概述 Ajax (Asynchronous JavaScript and XML) 是一种Web应用客户端技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯(可以有多个线程同时与服务器交互
JAVA 之 Ajax
热门推荐
qq_53312143的博客
11-01 1万+
Java Ajax 异步交互
使用Ajax向后台传参数
weixin_45058582的博客
12-12 3968
使用ajax向后台传递数据写了三种对象，文件，基本类型以及他们的混合
ajax返回值说明
Sq2494361212的博客
09-01 458
关于Ajax返回值数据说明 后台服务器返回的是JSON串,但是经过Ajax业务调用,则程序会自动的根据返回值类型进行解析.解析之后形成了JS的对象. API说明: 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。 虽然服务器的返回值是JSON,但是经过Ajax智能的判断,则动态的转化为JS的对象. ...
ajax同步的意义,关于ajax:AJAX同步和异步
05-31
AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，通过后台与服务器进行数据交互的技术。AJAX可以通过同步和异步两种方式进行数据交互。 AJAX同步指的是在请求发送到服务器后，必须...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值