原生Ajax五个基本步骤（面试题）

AJAX的概念

AJAX的全称是Asynchronous JavaScript And XML（异步的JS和XML），说明当初这门技术设想的最佳拍档是JS和XML，但是后来的发展过程中，以js对象为模板的json成为了主流。

Ajax运行原理

原生Ajax五个基本步骤

1、创建ajax对象
var xhr = new XMLHttpRequest();

2、用ajax对象的open方法设置连接服务器的参数
xhr.open( method,url,async);
method:请求类型，post或get
url：请求文件的具体地址
async:：是否异步（true为异步，false为同步）

3、设置发送数据的头部，一般用来说明数据格式，如：
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
注： multipart/form-data（一般在发送文件时使用，以二进制形式发送）和application/json（发送json格式数据）

4、发送请求，xhr.send(数据)
方法参数中get方法时添null或不添，推荐用post方法

5、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的

xhr.onreadystatechange（）方法和readyState属性。
每次readyState属性发生变化的时候就会触发onreadystatechange事件。
readyState属性的变化也就是XMLHttpRequest对象请求状态的变化。
status
xmlHttp.onreadystatechange = function(){//判断数据是否正常返回if(xmlHttp.readyState==4&&xmlHttp.status==200){//6.接收数据var res = eval('('+xmlHttp.responseText+')');console.log(res);
}
}

当xhr.readyState4&&xht.status200
时，通过xhr.responseText可获取发送过来的数据。

实例

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body>
<div id="span1"></div>
</body>
</html><script type="text/javascript">window.onload = function() {//1、创建ajax对象var xhr = new XMLHttpRequest();// 2、绑定监听--监听服务器是否已经返回对应数据（回调函数)xhr.onreadystatechange=function () {alert(xhr.readyState);if(xhr.readyState==4&&xhr.status==200){//5、判断通讯状态或接收返回数据，这个是写在第三个步骤回调函数里边的var res=xhr.responseText;document.getElementById("span1").innerHTML=res;}}//3、绑定地址,及配置其他参数xhr.open("POST","./ajax.php",true);//4、发送请求xhr.send();        }
</script>

原生Ajax五个基本步骤（面试题）相关推荐

原生Ajax的4大步骤分享
大致可以分为四个步骤更多免费教学文章请关注这里 1.new一个实例对象,new XMLHttpRequest(); 2打开请求,开(参数1,参数2,参数3)参数一可以为:获取或交参数2为我们请求的地 ...
js：原生ajax【纯js】
ajax 同步与异步区别同步:按顺序,依次执行,向服务器发送请求-->客户端做其他操作异步:分别执行,向服务器发送请求==>同时执行其他操作原生ajax 四步骤创建ajax对象 v ...
php通过js发送请求数据,使用原生javascript发送ajax请求数据的步骤
注:请求地址是自己的项目地址,请自行更改.这只是一个简单的原生XMLHttpRequst的使用,之后会发如何封装原生ajax实现jequery的ajax 第一步:创建xhr对象.const xhr = ...
瀑布流ajax思路步骤,原生ajax瀑布流demo分享(必看篇)
最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...
发送原生ajax请求的步骤
需要考虑下浏览器的兼容性 <script>/* ajax请求数据的步骤:1.创建ajax对象2.配置请求方式和请求地址以及是否异步请求3.浏览器向服务器发送请求4.服务器接受请求5.判断请 ...
JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
原生ajax和Jquery的ajax
目录原生ajax 传统请求(同步方式)的问题 Ajax优势和作用 Ajax请求与传统请求的区别: ajax原理(方法,属性 ) XMLHttpRequest open send 属性 readySt ...
一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
终于明白如何去写原生AJAX
面试常问的题----手写原生AJAX. 以下是个人的归纳总结,希望对大家有帮助. 一)原生JavaScript写出AJAX 首先我们根据文档进行相应的步骤分析. 第一步:创建对象第二步:初始化 HT ...

原生Ajax五个基本步骤（面试题）

AJAX的概念

Ajax运行原理

原生Ajax五个基本步骤

实例

原生Ajax五个基本步骤（面试题）相关推荐

最新文章

热门文章