AJAX 异步请求数据

AJAX 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

JQuery AJAX 应用详见：jQuery ajax

AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。

通过在幕后与 web 服务器交换数据，而不是每当用户作出改变时重载整个 web 页面，AJAX 技术可以使网页更迅速地响应。(目的：提高用户体验，较少网络数据的传输量)

Ajax原理:

Ajax使用：

 /*1.创建Ajax核心对象XMLHttpRequest(记得考虑兼容性)*/var xhr=null;  if (window.XMLHttpRequest)  {            // 兼容 IE7+, Firefox, Chrome, Opera, Safari  xhr=new XMLHttpRequest();  } else{      // 兼容 IE6, IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP");  } /*2.向服务器发送请求*///   method：请求的类型；GET 或 POST//   url：文件在服务器上的位置//   async：true（异步）或 false（同步）xhr.open(method,url,async);  xhr.send(string);    //post请求时才使用字符串参数，否则不用带参数。//注意：post请求一定要设置请求头的格式内容xhr.open("POST","test.html",true);  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  xhr.send("fname=Henry&lname=Ford");  //post请求参数放在send里面，即请求体/*3.服务器响应处理（区分同步跟异步两种情况）*///responseText 获得字符串形式的响应数据。//responseXML 获得XML 形式的响应数据。//同步处理xhr.open("GET","info.txt",false);  xhr.send();  document.getElementById("myDiv").innerHTML=xhr.responseText; //获取数据直接显示在页面上//异步处理（要在请求状态改变事件中处理）xhr.onreadystatechange=function()  { if (xhr.readyState==4 &&xhr.status==200)document.getElementById("myDiv").innerHTML=xhr.responseText;  };

XMLHTTPRequest对象：

方法	描述
abort()	停止当请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
serRequesHeader("header","value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

属性	描述
onreadystatechange	状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，返回数据的文本。
responseXML	服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象可以解析为一个DOM对象。
responseBody	服务器返回的主题（非文本格式）
responseStream	服务器返回的数据流
status	服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等）
statusText	服务器返回的状态文本信息，HTTP状态码的相应文本（OK或Not Found（未找到）等等）

AJAX 异步请求数据相关推荐

html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染问题
JAVA中.jsp模板文件AJAX异步请求 - 数据渲染失败,谁的过失? 后端已经查询出来结果,但是返回的API接口response查看不到对应的信息.(即:后台有,前台没有) 原因分析: 是因为AJ ...
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播的问题. 参考文章: (1)解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题.滑动后不能轮播 ...
ajax异步请求验证ua的网页,ajax 异步请求数据
点击页面事件.获取新的列表获取列表 // 因为是测试所以请求页面和参数都写死了 PHP 部分分为两个.一个是第一次请求的php页面,别一个是异步请求的php页面 index.php $list ...
通过Ajax异步请求数据
通过XMLHttpRequest对象的send()方法实现 <!DOCTYPE html> <html lang="en"> <head>< ...
踩坑：vue2 ajax异步请求数据，层数太多，页面无法渲染
刚接触vue2不是太久,勉强算是小白一枚吧,在此分享一下我最近踩的一个坑,望以后的小白们借鉴: 首先,数据结构: data(){ return { outer: { mid: [{ inner: &q ...
python django异步访问_初试Ajax异步请求（基于Django框架）
概要: Ajax异步请求数据之前就听朋友提起过,但是之前一直没有什么机会使用这个技术,就没有去了解,后面在做网站评论这一功能时,为了使用户评论之后不用刷新网页就能够看到刚刚评论的数据,所以决定使用Aj ...
jquery的ajax异步请求接收返回json数据
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以.这篇文 ...
ajax异步请求，以及ajax异步返回的数据的处理方案
为什么JS会有同步任务和异步任务: js是单线程,会按照顺序执行一个一个的任务,如果遇到某个任务像网络请求一类的需要延长执行回调函数,那么页面就会阻塞,所以引入了异步的概念. 同步任务:同步任务不需要 ...

AJAX 异步请求数据

AJAX 异步请求数据相关推荐

最新文章

热门文章