19、AJAX
1.Ajax的概念
Ajax是一种在无需重新加载整个网页（刷新页面）的情况下，能够更新部分网页的技术。
Ajax的全称是AsynchronousJavaScript and XML，即异步JavaScript+XML。它并不是新的编程语言，而是几种原有技术的结合体。
2.Ajax的优势
(一) 无刷新更新数据。
Ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
(二) 异步与服务器通信
Ajax使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
(三) 前端和后端负载平衡
Ajax可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
3.Ajax的工作原理
Ajax的工作原理相当于在用户和服务器之间加了一个中间层（Ajax引擎），使用户操作与服务器响应异步化。
Ajax其核心有++JavaScript、XMLHTTPRequest、DOM++对象组成，通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
4.扩展:同步和异步
异步：同时执行，也叫并发
同步：按步骤顺序执行，一条一条执行
5.扩展：程序、进程和线程
程序是指令的集合,
执行的程序称之为进程,
执行的个数是线程.
6.编写步骤
ajax请求：
1.创建Ajax对象
2.连接服务器
3.发送请求
4.接收返回 (Ajax返回的是字符串)
js:
function ajax(url,fnWin,fnFaild){
//1.买手机（创建ajax对象）
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");//XMLHttpRequest ,IE8一下不兼容
//2.拨号（与服务器建立连接）
xhr.open("GET",url,true);
//第一个参数：传递方式GETorPOST
//第二个参数：请求的URL地址
//第三个参数：是否异步 true : 异步 false : 同步 默认:true
//3.说话（发送请求）
xhr.send();
//4.听（接收返回）
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
if(typeof fnWin == 'function'){
fnWin(xhr.responseText);
}
}else{
if(typeof fnFaild == 'function'){
fnFaild();
}
}
}
}
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>通过ajax，向服务器请求数据，将服务器的数据放到div中</p>
<input type="button" name="btn" id="btn" value="请求数据" />
<div id="box">
</div>
<script type="text/javascript" src="js/ajax.js" ></script>
<script type="text/javascript">
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("box");
oBtn.onclick = function(){
ajax('abc1.jpg',function(str){
oDiv.innerHTML = str;
},function(){
oDiv.innerHTML = "服务器上没有您请求的数据！";
})
}
</script>
</body>
</html>
ajax面向对象的封装
var ajax = {};
ajax.get = function(url,fn){
var xhr = new XMLHttpRequest();
xhr.open('get',url);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
if(typeof fn === 'function'){
fn(xhr.responseText);
}
}
}
}
ajax.post = function(url,data,fn){
var xhr = new XMLHttpRequest();
xhr.open('post',url);
//设置请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
xhr.send(data);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
if(typeof fn === 'function'){
fn(xhr.responseText);
}
}
}
}
(三) Open方法：
- URL是相对于当前页面的路径，也可以使用绝对路径
- Open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送。
- 只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错
(四) Post传参：
发送表单数据
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");
(五) 请求状态监控
1. Onreadystatechange(状态改变事件)
++1) readyState属性：请求状态++
a) 0 ： 请求未初始化（还没有调用open（））
b) 1 ： 请求已经建立，但是还没有发送（还没有调用send()）
c) 2 ： 请求已发送，正在处理中（通常现在可以从响应中获取内容头）
d) 3 ；请求在处理中，通常响应中已有部分数据可用了，但是服务器还不有完成响应的生成。
e) ++4： 响应已完成，您可以获取并使用服务器的响应了。++
- Status属性 ： 请求结果
扩展：
201-206都表示服务器成功处理了请求的状态代码，说明网页可以正常访问。
200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
4XX表示请求可能出错，会妨碍服务器的处理。
404（未找到）服务器找不到请求的网页。
一、 JS解析JSON
(一) Eval()方法：解析JSON数据的最常用方法是使用javascript的eval()方法，代码如下 ：
function toJson(str){
var json = eval(‘(‘ + str + ‘)’);
return json;
}
++该方法存在性能和安全方面的问题，不建议使用。++
(二) JSON.parse()方法
这种方法只支持IE8/Firefox3.5+/Chrome4/Safari4/Opera10以上版本，这些浏览器都已经接近W3C标准，默认实现了toJSON方法。代码如下：
function toJson(str){
return JSON.parse(str);
}
(三) New Function方法：代码如下
function toJson(str){
var json = (new Function(“return” + str))();
return json;
}
二、 局部数据刷新
(一) 请求并显示静态TXT文件
- 字符集编码（三个按钮分别读取三个不同的文件并存入div中）
- 缓存、阻止缓存（?t=newDate().getTime()）
(二) 动态数据：请求json文件
- 分页
三、 事件委托的应用
四、 前后端分离
200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
19、AJAX的更多相关文章
- url路由、模板语言、ajax、用django框架创建表
1.后台管理的左侧菜单,默认只有第一个页签下面的选项是显示的,点了别的页签再显示别的页签下面的选项,问题是:点了任何菜单的选项后,左侧菜单又成了第一个页签的选项显示,别的页签隐藏,也就是左侧的菜单刷新 ...
- Day18 Django之路由系统、模板语言、Ajax、Model
一.路由系统 1.创建Django项目 django-admin startproject day18 cd day18 python3 manage.py startapp app01 2.app0 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- js、jQuery、ajax面试题
1.javascript的typeof返回哪些数据类型. 答案:string,boolean,number,undefined,function,object 2.例举3种强制类型转换和2种隐式类型转 ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- ABP(现代ASP.NET样板开发框架)系列之19、ABP应用层——审计日志
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之19.ABP应用层——审计日志 ABP是“ASP.NET Boilerplate Project (ASP.NET ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- ajax的使用：例题、ajax的数据处理
需要注意的是,调用的封装的数据库,和jQuery的保存地址 一.注册 (1)写文本框来进行用户名的验证 <input type="text" id="uid&quo ...
- math and date、ajax、画布
console.log(Math.PI);//圆周率 console.log(Math.sqrt(4));//平方根2 console.log(Math.abs(-2.3));//绝对值2.3 con ...
随机推荐
- [Python设计模式] 第16章 上班，干活，下班，加班——状态模式
github地址:https://github.com/cheesezh/python_design_patterns 题目 用代码模拟一天的工作状态,上午状态好,中午想睡觉,下午渐恢复,加班苦煎熬. ...
- Android 实现登录界面和功能实例
近期一个android小程序须要登录功能,我简单实现了一下.如今记录下来也当做个笔记,同一时候也希望能够相互学习.所以,假设我的代码有问题,还各位请提出来.多谢了! 以下.就简述一下此实例的主要内容: ...
- xsd文件规则和语法
1.简介 XSD即XML结构定义, XML Schemas Definition.其本身就是用xml描述的, 且遵循xml语法规则.一份XML schema文件描述了XML文档的结构. 基本规则: ...
- [C#] VS2017中在某些目录下使用不了 .NET Core 2.0 问题的处理办法
作者: zyl910 一.缘由 最近遇到了一个奇怪的问题--明明已经在VS2017里装好了 .NET Core 2.0 SDK,且测试过新建一个 .NET Core 2.0控制台项目能成功使用.但是在 ...
- Docker Mongo数据库开启用户认证
一.启动mongo容器的几种方式 #简化版 docker run --name mongo1 -p 21117:27017 -d mongo --noprealloc --smallfiles #自定 ...
- IOS开发中xib和StoryBoard的优缺点
总所周知,苹果官方为IOS开发提供了3种制作UI方式,让我们能够快速开发漂亮APP界面,每一种方式都有他们各自的特点,谁也不能代替谁.但是国内开发人员为此时争得不可开交. 大家各说各有理,说都想说服谁 ...
- B2B相关编码说明
B2B Cross reference Pre-Ordering enliteB2B RosettaNet EDIFACT ANSI X12 OAGIS iDOC Price Catalogue X ...
- 如何知道局域网内哪些ip被占用
诶,有时候真是略捉急,开始的时候估摸了一个网段,试了3个都没有通,觉得这个一个个试验的方法简直捉急到家了.下面就为大家分享3种简单地如何查看ip地址是否被占用的方法. 1.ping windows键+ ...
- YAML文件格式_k8s/docker-compose配置文件
YAML(Yet Another Markup Language),是一个JSON的超集,意味着任何有效JSON文件也都是一个YAML文件.它规则如下: )大小写敏感 )使用缩进表示层级关系,但不支持 ...
- go: writing stat cache:, permission denied
sudo chown -R $(whoami):admin /Users/zhushuyan/go/pkg && sudo chmod -R g+rwx /Users/zhushuya ...