http---ajax

b/s:浏览器请求服务器。c/s:是客户端请求服务器。

xml：可拓展标记语言。缺点，解析复杂，体积大。

html：超文本标记语言。

共同点：1，都是标记语言，都要使用标签进行标记。

　　　　2，语法格式类似。

区别：1，html：是预定义。xml：是完全自定义。

　　　2，作用不同：

　　　　html：是展示数据。

　　　　xml：是存储和传输数据。

http:超文本传输协议，是一种详细规定浏览器和服务器通信的规则，http分为请求和响应二个部分组成。

请求报文格式：1，请求行。2，请求头。3，请求主体。(post请求方式：请求行，是请求方式请求地址，协议版本。请求头：记录了浏览器相关信息发送给服务器。post请求要配上content-type属性。请求体：是前端传给后台的核心数据。)

响应报文格式：1，响应行。2，响应头。3，响应主体。（响应报文，状态行：协议版本，状态码，状态文本。响应头：服务器处理时间，服务器版本协议，后台编程语言版本，内容长度，返回的内容类型。响应体：服务器返回浏览器的核心内容。）

get请求和post请求的区别：get请求没有请求体，请求内容已经在请求行中。post请求必须设置content-type属性，get请求报文不用设置。

ajax：特点在不更新页面的情况下，请求数据，局部更新页面的数据。本质在http协议的基础上，以异步方式利用js与服务器通信。

button.onclick = function() {

　　var xhl = new XMLHttpRequest();

　　//1，设置请求报文

　　//请求行

　　//第一个参数是请求方式，第二个参数是地址

　　//ajax是异步的，也可以设置同步，open第三个参数默认是true,设为false就是同步。

　　xhr.open('get', 'url')

　　//请求头

　　xhr.setRequestHeader('content-type', 'text,html')

　　//请求主体send()发送

　　xhr.send(null)

　　//2，接收服务器返回的响应

　　//请求发出后，服务器何时响应，受外界因素影响时间不确定

　　//解决方案用事件监听onload()

　　xhr.onload = function () {

　　var r = responseText

　　console.log(r)

　　docment.querySelector('div').innerText = r

　　}

}

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

// 1- 点击注册按钮， 获取表单数据，校验表单数据是否合理， 在数据合理的情况下请求服务器 进行注册
// 2- 接收后台返回的注册结果 并显示；
$('.btn').click(function (){
// 获取表单数据
// var name = $('.name').val();
// var pass = $('.pass').val();
// var repass = $('.repass').val();
// // 对象 查询字符串
// var str = 'name='+ name +'&pass=' + pass + '&...'
// jquery提供 表单序列化 可以快速获取表单
// name=123&pass=123&repass=123&mobile=123&code=123
// 表单序列化：把表单 name属性 和value属性进行拼接；
var str = $('#ajaxForm').serialize();
console.log(str);

// $.ajax() 终止请求 return false;

// ajax框架
$.ajax({
type: 'post',
url: './register.php',
data: str,
dataType:'json',
beforeSend:function () { // 请求发送前
// 做数据校验，如何数据不合理，到此结束
// 1- 用户名不能为空
// 2- 密码长度大于等于6
// 3- 两次密码一致
// 4- 手机号格式 1开头的11数字 正则
// 5- 验证码：长度为4

// 1- 用户名不能为空
if ($('.name').val().trim().length == 0) {
// 提示
$('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('亲，用户名不能为空哦');
// 终止请求
return false;
}

// // 2- 密码长度大于等于6
// if ($('.pass').val().length < 6) {
// // 提示
// $('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('亲，密码不能小于6位哦');
// // 终止请求
// return false;
// }

// // 3- 两次密码一致
// if ($('.pass').val() != $('.repass').val()) {
// // 提示
// $('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('亲，两次密码不一致哦');
// // 终止请求
// return false;
// }
// // 4- 手机号格式 1开头的11数字 正则
// var telReg = /^1d{10}$/;
// var tel = $('.mobile').val();
// if ( !telReg.test(tel) ) {
// // 提示
// $('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('亲，手机号错误哦！');
// // 终止请求
// return false;
// }

// // 5- 验证码：长度为4
// if ($('.code').val().length != 4) {
// // 提示
// $('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('亲，验证码错误哦');
// // 终止请求
// return false;
// }

// 代码能执行到此，说明 以上所有 校验都通过了， 数据是合理的
// 给用户提示 按钮变色 文字提示 禁用按钮
$('.btn').addClass('gray').val('正在注册...').prop('disabled', true);

},
success: function (res) { // 请求成功时
console.log(res);
if (res.code == 200) {
alert(res.msg);
}
},
error:function (){ // 请求失败时

},
complete: function () { // 请求完成执行
// 恢复按钮的样式 ,启用按钮
$('.btn').removeClass('gray').val('立即注册').prop('disabled', false);
}
})

});