
- 外文名
- Asynchronous Javascript And XML And HTML
- 表达式
- Ajax
- 应用学科
- IT
- 中文名
- 异步JavaScript和XML 或 HTML
- 适用领域范围
- Web 前端开发
-
ajax
2018-09-28 20:35:381.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML(标准通用标记语言的子集)。通过在后台与服务器进行...1.1 什么是ajax:
- Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(无刷新技术)。传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面。
1.2Ajax的应用场景:
1.2.1 检查用户名是否已被注册:
很多站点的注册页面都具被自动检测用户名是否存在的友好提示,该功能整体页面并没有刷新,但仍然可以异步与服务器进行数据交换,查询用户输入的用户名是否存在数据库。
1.2.2 省市级联下拉框联动:
很多站点都存在输入用户地址的操作,在完成地址输入时,用户所在的省份是下拉框,当选择不同的省份时会出现不同市区的选择,这就是最常见的省市联动效果。
1.2.3 内容自动补全:
不管时专注于搜索的百度,还是站点内商品搜索的淘宝,都有搜索的功能,在i搜索框输入查询关键字时,整个页面没有刷新,但会根据关键字显示相关查询字条,这个过程是异步的。
百度的搜索补全功能:
淘宝的搜索补全功能:
1.3 同步方式与异步方式的区别:
- 同步方式发送请求:发送一个请求,需要等待响应返回,然后才能够发送下一个请求,如果该请求没有响应,不能发送下一个请求,客户端会一直处于等待过程中。
- 异步方式发送请求:发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待。
1.4 Ajax的原理分析:
- AJAX引擎会在不刷新浏览器地址栏的情况下,发送异步请求:
- 使用JavaScript获取浏览器内置的AJAX引擎(XMLHttpRequest对象)
- 使用js确定请求路径和请求参数
- AJAX引擎对象根据请求路径和请求参数进行发送请求
- 服务器接收到Ajax引擎的请求进行处理:
- 服务器获得请求参数数据
- 服务器处理请求业务(调用业务层代码)
- 服务器响应数据给Ajax引擎
- Ajax引擎获得服务器响应的数据,通过执行JavaScript的回调函数将数据更新到浏览器页面的具体位置:
- 通过设置给Ajax引擎的回调函数获取服务器响应的数据
- 使用JavaScript在指定的位置,显示响应的数据,从而局部修改页面的数据,达到局部刷新的目的。
2.1js原生的Ajax:
- js原生的Ajax开发步骤:
-
创建Ajax引擎对象
-
为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
-
绑定提交地址
-
发送请求
-
监听里面处理响应数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"></style> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> //同步请求点击事件 function sendRequest() { //js刷地址栏请求服务器端 location.href = "Ajax1Servlet?name=admin&password=123abc"; } //异步请求点击事件 function sendAsynRequest() { //1.创建ajax引擎对象 var xmlHttp = new XMLHttpRequest(); //2.设置回调函数,目的是处理服务器完全返回的数据 xmlHttp.onreadystatechange = function () { /** * 这个回调函数什么调用呢?是ajax引擎对象与服务器通信状态码改变的时候调用 * ajax引擎对象与服务器通信状态码xmlHttp.readystate,范围0~4 * 0:请求未初始化 * 1:服务器连接已建立 * 2:请求已接收 * 3:请求处理中 * 4:请求已完成,且响应已就绪 * 这个回调函数一共被调用4次,但只有状态码4的时候才代表服务器响应完成数据完成。 * ajax引擎通信转态码为4和http通信转态码为200 */ if(xmlHttp.readyState==4 && xmlHttp.status==200){ //获取响应数据 var content = xmlHttp.responseText; alert(content); } } //3.设置请求路径和请求参数 /** * xmlHttp.open(method,url) * method,请求方法,get或post请求 * url:请求路径 */ xmlHttp.open("get","Ajax1Servlet?name=admin&psw=abc123"); //4.发送请求 xmlHttp.send(); } </script> </head> <body> <input type="button" value="发送同步请求" onclick="sendRequest();"/> <input type="button" value="发送异步请求" onclick="sendAsynRequest();"/> </body> </html>
package com.sunny.web; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet(name = "Ajax1Servlet", urlPatterns = "/Ajax1Servlet") public class Ajax1Servlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取请求参数 String name = request.getParameter("name"); String password = request.getParameter("password"); //打印出来 System.out.println("name="+name); System.out.println("password="+password); //输出数据前端 response.getWriter().write("hello js ajax"); } }
2.2 Ajax引擎连接状态readyState值0~4变化过程:
- 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
这里状态值4只能说明接收到了服务器的响应服务器处理ajax请求结束,但是不能代表正确的获取了服务器的响应,需要配合http状态码200两个条件就可以说明正确的获取了服务器响应。只有这两个条件满足,xmlhttp.responseText才可以获取到正确的响应数据。
xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ if(xmlhttp.status == 200){ alert("响应数据" + xmlhttp.responseText); } } };
更多资料,搜索或扫码关注公众号:数说Cloud
-
jQuery 完整 ajax示例
2019-06-17 18:20:50$(function(){ //请求参数 var list = {}; // $.ajax({ //请求方式 type : "POST", //请求的媒体类型 contentType: "application/json;chars...$(function(){ //请求参数 var list = {}; // $.ajax({ //请求方式 type : "POST", //请求的媒体类型 contentType: "application/json;charset=UTF-8", //请求地址 url : "http://127.0.0.1/admin/list/", //数据,json字符串 data : JSON.stringify(list), //请求成功 success : function(result) { console.log(result); }, //请求失败,包含具体的错误信息 error : function(e){ console.log(e.status); console.log(e.responseText); } }); });
-
Ajax
2018-11-28 21:55:461 Ajax 异步请求 google的成名技术之一 后台提交请求 页面无刷新 局部刷新 2 js中的Ajax 1 发送Get请求 var xhr = new XMLHttpRequest();//构造ajax对象 xhr.open("GET", "/infos?name=admin", ...1 Ajax
异步请求
google的成名技术之一
后台提交请求
页面无刷新
局部刷新
2 js中的Ajax
1 发送Get请求var xhr = new XMLHttpRequest();//构造ajax对象 xhr.open("GET", "/infos?name=admin", true);//打开连接 xhr.send();//发送请求 xhr.onreadystatechange = function () { if (xhr.readyState == 4) {//4 代表服务器正确的给客户端响应,客户端也正确的收到了响应 var ret = eval("(" + xhr.responseText + ")") console.log(ret.name); } }
2 发送POST请求
var xhr = new XMLHttpRequest(); xhr.open("POST", "/infos", true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");// xhr.send("name=admin123"); xhr.onreadystatechange = function () { if (xhr.readyState == 4) {//4 代表响应成功 var ret = eval("(" + xhr.responseText + ")") console.log(ret.name); } }
3 jquery的ajax
get请求$.ajax({ url: "/infos1?name=admin1234", type: "GET",//可以省略 默认为GET请求 dataType: "json" }).done(function () { console.log("成功..."); }).fail(function () { console.log("失败..."); });
2 post请求
$.ajax({ url: "/infos", type: "POST",// data: "name=admin222", dataType: "json" }).done(function (data) { console.log(data); }).fail(function () { console.log("失败..."); });
以上是Ajax的代码 如有错误 请大佬指出
-
AJAX
2018-05-19 13:30:30概述 产生: 一次HTTP请求对应一个页面,这是Web... ... 2004年Gmail发布和2005年Google Map发布 2005年2月,AJAX这个词第一次正式提出,AJAX成为脚本发起HTTP通信的代名词。...AJAX通过原生的XMLHttpRequest对象发出H...概述
Asynchronous JavaScript and XML
用JavaScript执行异步网络请求
产生:- 一次HTTP请求对应一个页面,这是Web的运作原理。
- 1999年,微软公司发布IE浏览器5.0版,第一次引入新功能:允许JavaScript脚本向服务器发起HTTP请求。这样,用户可以留在当前页面中,同时发出新的HTTP请求。
- 2004年Gmail发布和2005年Google Map发布,最早大规模使用AJAX。
- 2005年2月,AJAX这个词第一次正式提出,AJAX成为脚本发起HTTP通信的代名词。
过程:
AJAX包括以下几个步骤:
- 使用原生的XMLHttpRequest对象发出HTTP请求
- 得到服务器返回XML格式的字符串()
- JS解析XML,并更新局部页面
语法
XMLHttpRequest对象
用来在浏览器与服务器之间传送数据。var ajax = new XMLHttpRequest(); ajax.open('GET', 'http://www.example.com/page.php', true); // 向指定的服务器网址,发出GET请求。 // open方法的第三个参数是一个布尔值,表示是否为异步请求。如果设为false,就表示这个请求是同步的
然后,AJAX指定回调函数,监听通信状态(
readyState
属性)的变化。ajax.onreadystatechange = handleStateChange;
XMLHttpRequest实例的属性
readyState
表示XMLHttpRequest请求当前所处的状态。
readyState === 4
表示整个请求过程已完毕onreadystatechange
指向回调函数,监听通信状态(readyState
属性)的变化。response
返回接收到的数据体responseType
指定服务器返回数据(xhr.response)的类型。responseText
返回从服务器接收到的字符串,如果本次请求没有成功或者数据不完整,该属性就会等于null
。var data = ajax.responseText; data = JSON.parse(data);
responseXML
返回从服务器接收到的Document对象status
表示本次请求所得到的HTTP状态码,基本上,只有2xx和304的状态码,表示服务器返回是正常状态。if (ajax.readyState == 4) { if ( (ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304) ) { // Handle the response. } else { // Status error! } }
具体状态码对应的意思见HTTP知识一章
statusText
返回一个字符串,表示服务器发送的状态提示。XMLHttpRequest实例的方法
abort()
用来终止已经发出的HTTP请求open()
用于指定发送HTTP请求的参数
open(method,url,async)
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
send()
发出HTTP请求
不带参数,就表示HTTP请求只包含头信息,也就是只有一个URL,典型例子就是GET请求。
带有参数,就表示除了头信息,还带有包含具体数据的信息体,典型例子就是POST请求。// 发送POST请求 var data = 'email=' + encodeURIComponent(email) + '&password=' + encodeURIComponent(password); ajax.open('POST', 'http://www.example.com/somepage.php', true); ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); ajax.send(data);
getResponseHeader()
返回HTTP头信息指定字段的值
getAllResponseHeaders()
返回服务器发来的所有HTTP头信息
setRequestHeader()
设置HTTP头信息。该方法必须在open()之后、send()之前调用。XMLHttpRequest实例的事件
readyStateChange事件
readyState属性的值发生改变,就会触发readyStateChange事件。
可以通过onReadyStateChange属性,指定这个事件的回调函数实现
原生JS发送AJAX
let request = new XMLHttpRequest(); request.open('GET','/xxx'); request.send(); request.onreadystatechange = ()=>{ if(request.readyState === 4){ if ( (ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304) ){ var string = request.responseText; var value = JSON.parse(string); } } }
jQuery实现AJAX
- jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback); // 必需的 URL 参数规定您希望加载的 URL。 // 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。 // 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
示例:文件 “demo_test.txt” 的内容加载到指定的
<div>
元素中$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); // responseTxt - 包含调用成功时的结果内容 // statusTXT - 包含调用的状态 // xhr - 包含 XMLHttpRequest 对象
- jQuery $.get()
通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
实例:
$.get("demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); // 第一个回调参数存有被请求页面的内容 // 第二个回调参数存有请求的状态。
- jQuery $.post()
通过 HTTP POST 请求向服务器提交数据。
$.post(URL,data,callback);
实例:
$.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); // 必需的 URL 参数规定您希望请求的 URL。 // 可选的 data 参数规定连同请求发送的数据。 // "demo_test_post.php" 中的 PHP 脚本读取这些参数,对它们进行处理,然后返回结果。 // 第一个回调参数存有被请求页面的内容 // 第二个参数存有请求的状态
跨域策略CORS
跨域资源共享 CORS 详解
AJAX只能向同源网址(协议、域名、端口都相同)发出HTTP请求,如果发出跨源请求,就会报错。因为AJAX是可以获取响应内容的,如果没有同源策略的限制,别的网站可以通过AJAX获取另一个网站的所有信息。但是,AJAX可以通过CORS发送请求到别的网站。
CORS全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源。
跨域能否成功,取决于对方服务器是否愿意给你设置一个正确的
Access-Control-Allow-Origin
如果设置了response.setHeader('Access-Control-Allow-Origin', 'http://pyz.com:8888')
http://pyz.com:8888
是我的协议+域名+端口号,这样我就可以访问他的服务器了,即使我们域名不同。如果该字段为*
,则表示这个服务器可以接受所有网站的AJAX请求。 -
初探Ajax
2016-05-09 16:45:38初探Ajax简介 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于创建... -
解决ajax跨域问题【5种解决方案】
2018-09-02 21:31:33什么是跨域问题? 跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+...跨域问题是针对JS和ajax的,html本身没有跨域问题。 查看浏览器开发者工具Console报错: Failed to load http://a.a.com:8080/A/... -
ajax通过post方法传数组
2018-08-02 09:50:44ajax在web项目开发中经常会用到,平时我们传递数据,基本都是一个参数名对应一个参数值,后端通过参数名就可以得到参数,从而进行相关逻辑处理,但是有时候我们会遇到批量操作,比如批量删除一个列表,这时候我们... -
$.ajax()方法详解
2019-05-31 09:28:28$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下。 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。 2.type: 要求为String类型的参数,请求方式(post或get)默认为... -
ajax嵌套ajax
2016-12-26 17:13:00今天做了个东西,在提交数据走后台返回到前台的ajax中后,在success函数中需要继续走后台逻辑,这时候就要在ajax中嵌套一个ajax,其实逻辑上没什么不同,只需要注意一点就行,在ajax中有一个async属性,这个值一定要... -
Ajax概述
2020-07-05 22:36:47------Ajax被认为是(Asynchronous JavaScript and XML的缩写)。允许浏览器与服务器通信而无需刷新当前页面的技术 ------“Ajax” 这个名字是在2005年2月,Adapitive Path的Jesse James Garrett在他的文章Ajax:A ... -
ajax使用 ajax+json
2018-11-08 20:54:27首先将ajax写于js方法中,定义事件,让元素触发,触发之后就会有数据产生给服务端 $.ajax({ type: "POST", url: "test.php", data: "name=garfield&age=18", success: ... -
Ajax及封装Ajax详解
2018-05-25 21:09:54Ajax 说道ajax到底什么是ajax? ajax是一种创建交互网页应用的一门技术。 ajax的应用场景有:(地图)实时更新,表单验证等等.... ajax的优缺点: 优点:1.实现局部更新(无刷新状态下),2.减轻了服务器端的... -
AjaxRequest(Ajax使用包)
2011-10-21 16:53:02Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包Ajax开发包 -
Ajax请求中url三种写法方式(Ajax请求路径问题,$.ajax中url携带当前页面路径原因)
2019-06-03 11:01:24一、绝对路径:包括协议名称、主机地址、端口、web项目名称等的完整请求路径。 例如: $.ajax({ url:... 坏处:使用绝对路径要求不能更改web项目的名称,如果webB项目重命名了,则对应的ajax请求... -
Ajax:前台利器—Ajax
2016-02-13 21:18:32跨新年将王兴魁老师的Ajax的十三个视频进行了学习,与此同时也通过书籍或网上查阅了些关于Ajax的资料。早就听闻Ajax鼎鼎大名,之前在项目中也对它的强大功能领教一二,近几日深入走近它的世界仍收获颇丰。 【前台... -
封装Ajax函数
2020-05-19 17:19:12Ajax 说道ajax到底什么是ajax? ajax是一种创建交互网页应用的一门技术。 ajax的应用场景有:(地图)实时更新,表单验证等等.... 所以要再次结合promise对Ajax进行封装以便于项目开发 ajax请求函数模块 返回值: ... -
jquery Ajax提交表单(使用jquery Ajax上传附件)
2016-04-07 15:05:28用过jquery的Ajax的人肯定都知道,Ajax的默认编码方式是”application/x-www-form-urlencoded“,此编码方式只能编码文本类型的数据,因此Ajax发送请求的时候,会把data序列化成 一个个String类型的键值对,此种传输... -
细谈 axios和ajax区别
2019-03-11 18:00:53它和ajax有什么关系呢和区别呢?接下来一起看下: 1.区别 axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。 简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。... -
数据请求:Ajax基础
2020-05-02 09:54:30Ajax 概述 它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验。 Ajax 的应用场景 页面上拉加载更多数据 列表数据无刷新分页 表单项离开焦点数据验证 搜索框提示文字下拉列表 ... -
Ajax清晰请求步骤与代码
2019-04-17 19:46:39异步请求ajax的使用在前后台传递数据,优化用户体验起着至关重要的角色,那么下面给大家简单罗列了一下ajax请求的步骤与代码。 一、原生JS中的Ajax: 1、使用ajax发送数据的步骤 第一步:创建异步对象 var xhr... -
Ajax数据返回格式问题解决
2016-05-11 14:20:09Ajax数据返回格式问题解决 服务端返回的数据格式为: response.setContentType("text/xml;charset=utf-8"); 设置发送到客户端的响应的内容类型为xml格式、编码方式为UTF-8的文本内容。 客户端接收代码为:if (req.... -
原生JS的ajax,原生ajax传递参数格式,ajax参数传递,ajax传递参数
2018-08-10 12:48:34原生ajax请求服务器 &amp;lt;script&amp;gt; function success(weiXinConfig) { console.log(&quot;这是微信getConfig回调函数&quot;+ weiXinConfig); // weiXinConfig = JSON.... -
JS原生Ajax和jQuery的Ajax与代码示例
2018-08-26 20:38:57JS原生Ajax和jQuery的Ajax 【学习目标】 1,了解JS原生Ajax原理 2,掌握json数据格式 掌握json数据格式方式 掌握json的解析方式 3,掌握jQuery中的Ajax封装 4,使用Ajax实现特效 实现异步验证用户名是否存在 ... -
ajax跨域问题
2018-06-07 00:18:44什么事ajax跨域问题 跨域问题来自于浏览器同源策略的限制,包括DOM同源限制和ajax同源限制,本文探讨的是ajax跨域。ajax跨域指的是一个页面的ajax只能请求和当前页面同源的数据,如果发现请求到的数据不符合... -
什么是Ajax以及ajax请求的步骤
2019-04-18 15:56:10什么是Ajax以及ajax请求的步骤 1.Ajax是什么? Asynchronous JavaScript & XML。Ajax是web开发的一种技术。 2.Ajax请求的步骤 (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象; (2)创建一个新的`... -
Ajax运行原理
2020-07-10 11:19:101 Ajax 的运行原理 2Ajax 简介 3 Ajax 的使用 3.1 XMLHttpRequest 对象 3.2 Ajax 的使用步骤 4 实例 4.1Jsp页面 4.2 Servlet 4.3 运行效果 1 Ajax 的运行原理 2Ajax 简介 Ajax 即“Asynchronous ... -
Ajax介绍——什么是Ajax?
2018-09-20 19:40:31AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新...
-
linux网络命令
-
SpringBoot 自动装配原理
-
ipython自动补全crush处理方法
-
葡萄图对象(有需要的地方只需要用个div容器)
-
Vim编辑器与Shell命令脚本_2021-01-23
-
RC522-RFID门禁刷卡自动识别系统(原理图源程序论文等)
-
Linux学习笔记——Shell命令(2)
-
csv文件数据读取错误解决
-
Appium自动化测试套餐
-
expresspro.rar
-
Unity游戏开发之数字华容道
-
CentOS 7 安装Docker
-
视频批量绿幕抠像含测试工具.zip
-
java数据类型:byte
-
开启 Python 爬虫之路 必知必会的知识
-
vc9 vc13 vc14运行库.rar
-
转行做IT-第2章 HTML入门及高级应用
-
Qt项目实战之基于Redis的网络聊天室
-
千牛消息监控测试版.zip
-
Java线程案例之生产者与消费者