一、使用情况：AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下使用。AJAX的核心：向服务器发送多个请求而无需用户等待来至服务器的响应。

二、AJAX的优势

    1.异步加载数据，无需切换页面,不需要刷新
    2.更佳的用户体验：局部刷新、及时验证、操作步骤简化等
    3.节省流量
    4.JS控制数据的加载，更加灵活多用
三、是用步骤：
    1.new XMLHttpRequest()
    2.open
    3.send
    4.onreadystatechange
    5.responseText
例子：（注意：要在服务器上运行）
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript">

//第一步：买手机 var ajax=new XMLHttpRequest();

if (window.XMLHttpRequest){

var ajax=new XMLHttpRequest();//现代浏览器

}

else{

var ajax=new ActiveXObject("Msxml2.XMLHTTP");//见人IE6

}

//第二步：拨电话号

ajax.open("get","test.txt",true);//1.http方法get/post 2.请求的URL地址，可以为绝对地址也可以为相对地址。3.设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。

//第三步：发送

ajax.send();

//第四步：拨号成功

ajax.onreadystatechange=function (){

// alert(ajax.readyState);

if (ajax.readyState==4){

// alert("已完成");

if (ajax.status>=200&&ajax.status<300||ajax.status==304){

//对方回复

alert(ajax.responseText);

}

}

}

// alert(ajax);

// console.log(ajax);

</script>

</head>

<body>

</body>

</html>
四、readyState的常用的几种状态：
 
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
 
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败
 
200 请求成功    
301 所请求的页面已经转移至新的url 
302 所请求的页面已经临时转移至新的url  
304 文档未修改原来缓冲的文档还可以继使用
400 服务器未能理解请求  
404 服务器无法找到被请求的页面 
500 请求未完成。服务器遇到不可预知的情况 
502 网关错误
 
请求成功条件
readyState==4&&status>200&&status<300||status==304
 
五、为了以后能更方便地使用，可以把ajax封装成一个js函数，如：
function fnAjax(url,succFn,faildFn){

if (window.XMLHttpRequest){

var ajax=new XMLHttpRequest();

}

else{

var ajax=new ActiveXObject("Msxml2.XMLHTTP");

}

ajax.open("get",url,true);

ajax.send();

ajax.onreadystatechange=function (){

if (ajax.readyState==4){

if (ajax.status>=200&&ajax.status<||ajax.status==304){

succFn(ajax.responseText);

}

else{

faildFn();

}

}

}

}
六、函数的使用例子：
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

div{

height: 100px;

width: 100px;

background-color: #ccc;

display: none;

}

</style>

<script type="text/javascript" src="ajax.js"></script>

<script type="text/javascript">

window.onload=function (){

var btns=document.getElementsByTagName("input");

var divs=document.getElementsByTagName("div");

for (var i = 0; i < btns.length; i++) {

btns[i].index=i;

btns[i].onclick=function (){

for (var i = 0; i < btns.length; i++) {

divs[i].style.display="none";

};

divs[this.index].style.display="block";

//h/a2.html

var _this=this;

fnAjax("h/a"+(this.index+1)+".html",function (str){

// alert(str);

divs[_this.index].innerHTML=str;

});

}

};

}

</script>

</head>

<body>

<input type="button" value="按钮1">

<input type="button" value="按钮2">

<input type="button" value="按钮3">

<div style="display:block;">

<p>我是a1</p>

</div>

<div></div>

<div></div>

</body>

</html>
 

项目中关于AJAX的使用总结的更多相关文章

  1. 项目中关于ajax jsonp的使用

    项目中关于ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法总算搞定了,记录一下 function TestAjax() {    $.ajax({       ...

  2. Struts2项目中使用Ajax报错

    在Struts2项目中使用Ajax向后台请求数据,当添加了json-lib-2.3-jdk15.jar和struts2-json-plugin-2.3.4.1.jar两个包时,在result中配置ty ...

  3. JavaWeb项目中使用ajax上传文件

    1.jsp $("#cxsc").click(function(){ var bankId = $("#bankId").val(); var formdata ...

  4. 在.net MVC项目中使用ajax进行数据验证

    1.首先要在网页引入应该引入的js文件 在这里回顾一下在模板页里面挖坑的技术 2.在html中使用html辅助方法 3.验证模型 4验证方法

  5. django项目中的ajax分页和条件查询。

    1,路由 #主页面路由 re_path('article/article_list/', article.article_list,name='article/article_list/'), #分页 ...

  6. Vue.js项目中使用 Ajax 和 FormDate 对象上传文件

    let param = new FormData(); param.append("paths", this.ruleForm.uploadPath); param.append( ...

  7. 实战：vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...

  8. C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  9. JavaEE-09 Ajax与jQuery在JavaEE项目中的使用

    学习要点 JavaScript实现Ajax jQuery实现Ajax JSON JSON-LIB FastJSON JavaScript实现Ajax 认识Ajax 旧版百度地图 百度搜索自动补全 百度 ...

随机推荐

  1. (Access denied for user 'root'@'localhost' (using password: NO))

    先记一下遇到的问题: 项目使用mySql服务器,用户名密码正常,权限齐全,mySql服务已启动,但运行java web程序时显示: 目前正在解决 解决方案: 1.打开MySQL目录下的my.ini文件 ...

  2. hadoop源码编译

    为何要自行编译hadoop源码,往往是由于官方提供的hadoop发行版都是基于32位操作系统,在操作hadoop时会发生warn.   准备软件: 1)JDK 2)Hadoop源码 3)Maven 4 ...

  3. C语言-运算符与表达式

    运算符分类: 算术运算符:+   -  *    /          % 关系运算符:>  <  =  <=  >= ==  != 逻辑运算符:&& || ! ...

  4. AdapterView及其子类之四：基于ListView及SimpleAdapter实现列表

    代码请见SimpleAdapterDemo.zip. 步骤如下: 1.创建主布局文件 <RelativeLayout xmlns:android="http://schemas.and ...

  5. S​Q​L​ ​S​e​r​v​e​r​中​​的​P​W​D​E​N​C​R​Y​P​T​与​P​W​D​C​O​M​P​A​R​E​函​数

    前幾天有個客戶的網站出問題(不是我們開發的),請我們幫他看,主要的問題是他們的網站會員在進行查詢密碼時,會員收到信的時候在密碼的欄位竟然會出現 System.Binary[] 字樣.而我進去資料庫中查 ...

  6. [python] 如何用python操作Excel

    直接上代码: from openpyxl import Workbook from openpyxl.cell import get_column_letter wb = Workbook() des ...

  7. Arduino红外遥控系列教程2013——红外转码

    教程三:红外转码教程——用电视遥控器取代机顶盒遥控器 前言前段时间看到了使用红外遥控的X-Bot机器人[链接],感觉很有意思.最近开始玩Arduino与红外,一方面打算将来用于BOXZ的之间的通讯控制 ...

  8. C#操作XML的完整例子——XmlDocument篇(转载，仅做学习之用)

    原文地址:http://www.cnblogs.com/serenatao/archive/2012/09/05/2672621.html 这是一个用c#控制台程序下,  用XmlDocument 进 ...

  9. HDOJ-1007 Quoit Design（最近点对问题）

    http://acm.hdu.edu.cn/showproblem.php?pid=1007 给出n个玩具(抽象为点)的坐标 求套圈的半径 要求最多只能套到一个玩具 实际就是要求最近的两个坐标的距离 ...

  10. STL集合容器set按照由小到大或者由大到小的顺序存放元素

    (1)由小到大 set<int,less<int>> M; M.insert(1960); M.insert(1952); M.insert(1771); M.insert(1 ...