ajax是什么？咋实现的

创建交互式网页应用的网页开发技术

再不重新加载整个网页的前提下，与服务器交换数据并且更新部分内容

简单来说就是无页面刷新的数据交互

通过创建xmlhttprequest对象向服务器异步发送请求从而获取数据，然后操作dom更新内容

1，创建xmlhttprequest对象xmh

2，通过xmh里面的open与服务器创建链接

3，构建请求所需的数据，通过send发送给服务器

4，通过onreadystatechange事件监听服务器的状态

5，接受数据，并且处理后把数据更新到页面上

// get 请求

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// XMLHttpRequest.open() 方法初始化一个请求
// 原始API:xhr.open(method, url, async);
// method:要是用的HTTP方法，url：请求的主体，async(可选)：false为同步，true为异步，默认为同步
xhr.open('GET', '/api', false);
// 只要 readyState 属性发生变化，就会调用相应的处理函数。
xhr.onreadystatechange = function () {
// 这里的函数异步执行，可参考之前 JS 基础中的异步模块
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 从服务器端返回文本。
alert(xhr.responseText);
};
};
};
// 默认要设置,因为get请求，不需要发送数据
// XMLHttpRequest.send()方法用于发送 HTTP 请求
xhr.send(null);

ajax是什么？咋实现的相关推荐

html+spring boot简单的ajax数据传输实现
本篇讲解在前后端不分离情况下的html+spring boot的项目数据传输实现首先,后台我写了三个接口 package com.demo.ajax.controller;import com.de ...
form表单提交前进行ajax或js验证，校验不通过不提交
在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
使用ajax不刷新页面获取、操作数据
在使用jsp或html时,利用ajax达到不刷新页面就可以获取.操作数据. 首先上代码 (html+js) 在此处需要引入jquery插件  < ...
Ajax接收Java异常_java – 处理来自Servlet的Jquery AJAX响应中的异常
我的servlet代码是 try{ //something response.setStatus(201); out.print("Data successfully saved" ...
【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【AJAX】Ajax学习总结
AJAX是什么: 是Asynchronous(异步).JavaScript.And.Xml 的缩写主要就是说: 通过JavaScript融合了Web开发标准表示技术,DOM动态显示和交互,XML和X ...
SpringMVC——通俗易懂讲讲Ajax~
聊聊Ajax 一.什么是Ajax 二.iframe标签简单伪造Ajax 三.Ajax的实现 1. 基本概念的了解 Ajax的核心是什么? XMLHttpRequest是什么? Ajax数据传输的数据格 ...
[JAVA EE]ajax 方式提交数据
前端界面:Form表单前端数据提交:使用 ajax 方式 ( 基于jquery ) 后台代码: TestController.java @Controller public class TestCo ...
ajax交互扩展遇到的问题,ajax autocomplete扩展程序无法正常工作
我在文本框上有一个自动填充扩展器,它将记录显示为数据库中的列表,但是我点击了texbox并开始输入任何内容.我的HTML代码是 Enabled="True" TargetContr ...
ajax发送动态字符传,如何发送ajax请求文件与其他字符串的变量？
我想创建ajax调用并发送数据与文件和其他变量,我也使用django,如果它的帮助.如何发送ajax请求文件与其他字符串的变量? 我尝试: js文件: $("#save-new-reques ...

ajax是什么？咋实现的

ajax是什么？咋实现的相关推荐

最新文章

热门文章