0x00 Ajax使用
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
Ajax是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量的数据交换
Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页进行部分更新。
调用封装好的Ajax,传入读取的文件地址，成功需要做的事情和失败需要做的事情
ajax(url,fnSucceed,fnFailed)
npm install -g http-server 安装http-server 启动一个本地静态服务
0x01 如何创建Ajax
1.创建Ajax对象
ie5，ie6使用var oAjax= new ActiveXObject("Microsoft.XMLHTTP")创建
现在浏览器使用 var oAjax = new XMLHttpRequest()创建(一般使用这种即可)
2.连接服务器
oAjax.open('GET',url,true)
三个参数分别为:
- 请求类型
- 文件在服务器上的位置
- 异步（true）或者同步（false）
3.发送请求
oAjax.send()
4.接受数据
onreadystatechange事件
readState属性：请求状态
0 未初始化，还没有调用open()方法
1 载入 已调用send(）方法，正在发送请求
2 载入完成 send()方法完成，已收到全部响应内容
3. 解析 ：正在解析响应内容
4. 完成 响应内容解析完成，可以在客户端调用了。
status属性：请求结果
200：OK
404：未找到页面
请求成功返回内容
responseText
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="read">读取数据</button>
<script type="text/javascript">
function Ajax(url,fnSucceed,fnFailed){
//1.创建ajax对象
if(window.XMLHttpRequest){
var oAjax = new XMLHttpRequest();
}else{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.连接服务器
oAjax.open('GET',url,true);
//3.发送请求
oAjax.send()
//4.接受数据
oAjax.onreadystatechange=function(){
if(oAjax.readyState == 4){
if(oAjax.status == 200){
fnSucceed(oAjax.responseText);
}else{
if(fnFailed){
fnFailed();
}
}
}
}
}
var oBtn=document.getElementById('read');
oBtn.onclick = function(){
Ajax("xiaodi.txt",function(res){
alert(res);
},function(){
alert("请求失败");
})
}
</script>
</body>
</html>0x02 RegExp对象
1.新建正则表达式有两种方法：
一种使用字面量，以斜杠表示开始和结束
var regex = /xyz/
另一种使用RegExp构造函数
var regex = new RegExp('xyz');
推荐第一种
2.test() 返回一个布尔值，如果能匹配上就返回true；
3.exec()返回匹配的结果，返回值是一个数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var str=2;
var reg = /^\d$/;
console.log(reg.test(str));
console.log(reg.exec(str));
</script>
</body>
</html> 4.匹配修饰符
(1)i 修饰符，默认情况下，正则表达式区分大小写，加上i修饰符后表示忽略大小写(ignorecase)
var reg =/^B$/i；
console.log(reg.exec('b'))；仍然能匹配成功
(2)g修饰符,默认情况下，正则表达式第一次匹配成功后，就停止匹配了，加上g表示全局匹配。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var str="hello world hello hello";
var reg = /hello/g;
// 匹配第一个hello
console.log(reg.exec(str));
// 匹配第二个hello
console.log(reg.exec(str));
// 匹配第三个hello
console.log(reg.exec(str));
</script>
</body>
</html> 