Ajax

基本介绍
AJAX 全称：
Asynchronous JavaScript and XML(异步的JavaScript和 XML)。

局部刷新技术：
解决页面全部刷新的效率低低的问题

Ajax 核心对象：
xmlHttpReaquest

Ajax 执行的原理：
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax实现了与服务器的异步通信、局部刷新页面，这就是Ajax技术的核心所在。

Ajax 接收的数据类型为：
字符串
XML对象
1：什么是Ajax
当万维网开始时,网页只包含静态内容。客户端和服务器之间传输数据都是通过form表单。在web应用程序中,客户端通过表单提交自己输入的信息,服务器端的程序接受到客户提交的表单后,根据表单的数据内容进行处理,然后把处理结果返回给用户,这样就完成了一个简单的交互。

但是这种传输方式有一个很大的缺陷,就是每次用户与服务器的交互都需要重新刷新整个页面。然而在那个网速不佳的年代。重新刷新页面的成本时很高的,通常会导致在加载页面时屏幕变空白

1999年,微软公司在Internet Explorer 5中实现了XMLHttp ActiveX 控件。它最初是为outlook Web客户端开发的,允许在后台使用JavaScript异步发送数据。随后其他浏览器也实现了这种技术,不过它仍然时一个相对未知的功能，很少使用

Ajax这个术语是由jesse james Garrentt 于2005年 "在Ajax ：一种新的Web应用程序方法 "一文中所创造的,他提到了Google在最近的Web应用程序中使用的技术,Ajax是一个简介的首写字母缩写词，指的是该技术在使用的过程中所涉及到的不同部分,全程：Asynchronous JavaScript and XML。

Asynchronous：
翻译成中文是异步的意思,当发送数据请求时,程序不必停下来等待响应。它可以继续运行,等待响应收到时触发事件。通过使用回调来管理这种过程,程序能够以有效的方式运行,避免了数据来回传输带来的延迟。

JavaScript：
利用JavaScript我们可以接受来自服务器端返回的数据,并将这些数据实时的更新到页面。

XML：
最开始术语Ajax被创造时,经常用XML文档来返回数据。但是实际上可以发送许多不同类型的数据。到目前为止,在Ajax中最常用的是JSON,它比XML更轻量且更易于解析。JSON还具备被JavaScript原生支持的优点,所以我们可以处理JavaScript对象,而不必使用DOM方法来解析XML文件

优点：

页面无刷新,在页面内与服务器通信,减少用户等待的时间,增强了用户体验。
使用异步方式与服务器通信,响应速度快
可以把一些原本服务器的工作转到客户端,利用客户端闲置的能力来处理，减轻了服务器和宽带的负担,节约空间和宽带租用成本。
基于标准化的并广泛支持的技术,不需要下载插件或者小程序。
缺点

无法进行操作的后退。
对搜索引擎的支持比较弱
可能会影响程序中的异常处理机制
安全问题。对一些网站的攻击如CSRF ,XXS ,SQL 注入等不能很好的防御。
2：Ajax实现原理
使用原生的Ajax大致包括以下几个步骤：

1：创建XMLHttpRequest对象(核心对象) 由于IE6以下的兼容性问题
2：发出HTTP请求
3：接收服务器传回的数据
4：更新网页数据
概括起来,就是Ajax通过原生的XMLHttpRequest对象发出HTTP请求,得到服务器返回的数据后,再进行处理。

/**
原生态的实现Ajax代码
第一步把Ajax发送请求的对象实例化
**/

var httpRequest;
  if(document.all){
   httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
  }else{
    httpRequest=new XMLHttpRequest();
  }

第二步 使用xmlHttpRequest 规定请求的类型 
再调用 httpRequest.send()方法发送请求

/
httpRequest.open(“请求的方式”,“请求的servlet”,true)
/
参数说明：
method：发送请求的方式。取值有GET和POST（不区分大小写，建议使用大写）
url：请求资源的位置路径
async：控制是否异步处理请求。取值有true（异步）和false（同步），默认为true
**/
//获取服务器端返回的数据
httpRequest.onreadtsyayechange=function(){
//表示响应成功
if(httpRequest.readatState4 && httpRequest.status200){
//获得服务器返回的数据
var msg=httpRequest.responseText;
//把服务器返回的json格式的字符串转换为 json对象 以方便取数据
var student=window.eval("(+msg+)");
$("#show").html(“编号:”+student.id+“姓名:”+student.name);
}
}

$(function(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: …a: {"username":("#username").val()},
{“pwd”😒("#pwd").val()})}

success:function(data){
<!--需要渲染到某个标签-->
$("#show").html("编号:"+data.id+"姓名:"+data.name);
}
/**
jquery 的三种简写方式
1：简写
2：uri地址
3：回调函数：当数据从服务器返回来，再回过头来调用该函数
回调函数中的参数就是服务器返回的数据
4：返回数据的类型 text json jsonp
采用键值对的方式将参数返回到服务器
**/
$.get("test",
{"username":$("#username").val()},
{"pwd":$("#pwd").val()})

})
})
ajax：同源策略
同协议+同域名+同端口

jsonp
全称：JSON with padding (填充式JSON或参数式JSON的简写)
为了解决Ajax跨域问题
跨域：到别的服务器请求内容

//使用jQuery 发送 jsonp 进行跨域取值
$.ajxa({
type:“post”,
url:“http://127.0.0.1:8080/web_two/two”,
dataType:“jsonp”,
})
Json
全称：
JavaScript对象表示发(JavaScript Object Notation)
JSON 是存储和交换文本信息的语法 类似XML
JSON比XML更小、更快、更易解析

简单理解：
一种数据交换格式

json 语法：
{} 采用键值对的方式进行存储 有多个属性用逗号隔开

将对象直接转换为一个json格式的字符串工具
Jackson,gson,fastJson把对象转换为一个json格式的字符串
gson Google公司把对象转换为一个json格式的字符串的一个工具

var person= {id:1,name:‘小夏’,age:20,dog:{id:10,name:‘大黄’}};

var person= {id:1,name:‘小夏’,age:20,
dogs:[{id:10,name:‘老大’},
{id:11,name:‘老二’},
{id:12,name:‘老幺’}]};
Mock.js介绍
1.特点
生成随机数据 拦截Ajax请求

2.使用
1.生成随机数据
Mock.mock( templete )
数据模板中的每个属性由3个部分构成：属性名 name 生成规则rule 属性值value

“name|rule”: value
说明：

属性名和生成规则之间用竖线分隔
生成规则是可选的
const data = Mock.mock({
// 随机生成一个包含4个对象的数组
‘list|4’: [{
// 对象的id属性名依次加1
‘id|+1’: 1,
// 随机产生一个中文的姓名
“name”: ‘@cname()’,
// 随机生成一个地址
addr: ‘@county(true)’,
//随机生成一个数字大小在18到30
‘age|18-30’: 1,
// 随机生成一个日期
birth: ‘@date()’,
// 随机生成一个整数，0/1，根据这个来给“男”“女”
gender: ‘@integer(0, 1)’,
//随机生成一个邮箱
email: ‘@EMAIL()’,
// 在数组中随机找一个
‘like|1’:['看书,‘运动’,‘听音乐’],
//1-100随机生成一个保留两位小数
‘score|1-100.2’:1,
// 随机生成一个日期
time: “@date(‘yyyy-MM-dd’)”,
// 用正则匹配1开头的11位数字的手机号
mobile: /^1[3-9]\d{9}$/
}]
})
console.log( data );
2.拦截Ajax请求
Mock.mock( rurl, templete )

rurl表示需要拦截的URL。当拦截到匹配rurl的Ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。

KaTeX parse error: Undefined control sequence: \d at position 747: …obile: /^1[3-9]\̲d̲{9}/
}]
})