Ajax随笔记

AJAX

Ajax Asynchronous Javascript And XML（异步JavaScript和XML）

简单来说就是-- 数据交互无页面刷新。 一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的清空下，能够更新部分网页的技术。
步骤
输入数据----提交给后端—去数据库验证—判断是否有这个用户–返回此用户已存在
有利有弊
ajax不适合代替所有的数据交互
适合用在局部的数据更新
数据交互---->操作数据

AJAX的使用

1.创建XMLHttpRequest对象
	var xhr=new XMLHttpRequest();  主流浏览器

2.建立连接使用open方法
get方式
可以将数据写入文件进行判断有没有发送到PHP文件中
xhr.open(‘get’,’.php?name=xiaohua&sex=nv’)
post方式
xhr.open(‘post’,‘03-post.php’);
参数写在send方法中，
post方式需要设置请求头，写在send上面
xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’);

3.发送请求使用send方法
xhr.send();
4.事件监听（数据有无返回）
onreadystatechange：监听事件
当readyState的值改变的时候，就会触发,一般在事件中会监听readyState状态、HTTP状态码
xhr.onreadystatechange=function(){
判断HTTP状态码
判断监听状态码
if(xhr.readyState4){
if(xhr.status200){
//console.log(xhr.responseText);
//直接接收返回数据是一个json格式的字符串,将字符串转换为对象进行操作
var obj=JSON.parse(xhr.responseText);
console.log(obj.msg);
}
}
}

5.通过判断状态接受后端返回的数据
后端返回json字符串
JSON.parse(xhr.responseText);

//get请求
var xhr = new XMLHttpRequest(); //创建XMLHttpRequest()
xhr.open('get','url');
xhr.send();
xhr.onreadystatechange= function(){
    if(xhr.readyState == 4){
        if(xhr.status ==200){
            console.log(xhr.responseText);
            var obj = JSON.parse(xhr.responseText);
            console.log(obj.msg)
        }
    }
}

//post请求

var xhr=new XMLHttpRequest();
	//建立post方式连接
	xhr.open('post','文件名');
	//设置请求头
	xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	//post 方式
	xhr.send('name=xiaohua&sex=man');
	
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4 && xhr.status==200){
			console.log(xhr.responseText);
			var obj=JSON.parse(xhr.responseText);
			document.write(obj.msg);
		}
	}

状态值判断 xhr.readyState
0 请求未初始化
1 请求已初始化
2 请求以发送
3 请求正在处理
4 请求已经返回
HTTP状态码
200 请求成功
301 请求重定向
401 请求需要验证
403 无权限
404 找不到页面
500 服务器内部错误

可以参考这篇文章，很详细，链接在此，方便以后继续学习，谢谢分享