浅谈前后端交互之AJAX

AJAX介绍

术语ajax最早产生于2005年，Ajax表示Asynchronous JavaScript and XML
(异步JavaScript和XML)，但是它不是像HTML、JavaScript或CSS这样的
一种“正式的”技术，它是表示一些技术的混合交互的一个术语（JavaScript、
Web浏览器和Web服务器），它使我们可以获取和显示新的内容而不必载入
一个新的Web页面。增强用户体验，更有桌面程序的感觉。

什么是Ajax?

Ajax是一种技术方案，但并不是一种新技术。它依赖现有的CSS/HTML/JavaScript，
而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器
可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行
数据交互。

也就是说，Ajax是前后端交互的方案，可以快速创建动态网站，同时页面不刷新，只是局部刷新。

AJAX应用场景

1.登录注册
2.百度搜索
3.分页
4.物流查询
5.下拉加载更多 等等…

AJAX交互

AJAX优缺点

• 优点：

1.局部刷新网页，不是整个页面都去刷新 （提高用户体验度）
2.减轻服务器压力
3.减少了客户端宽度的占用

• 缺点：

1.破坏了浏览器的返回机制 back
2.Ajax对搜索引擎不友好
3.安全问题

AJAX实现步骤

AJAX实现原理

AJAX步骤

1.创建ajax对象（XMLHttpRequset）
2.让ajax去发送http网络请求 请求服务器
3.服务器接收网络请求
4.服务器处理请求 并响应数据返回给ajax对象
5.Ajax接收数据后 通过js渲染页面

	//1.创建ajax对象
	var xhr = new XMLHttpRequest();//IE7+, Firefox, Chrome, Opera, Safari
	//console.log('new',xhr.readyState);//0 初始化xhr对象，没有发送请求

    /* 
    // IE6, IE5 浏览器执行代码
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	*/

	//2.准备请求
	//语法：xhr.open('请求方法get|post','地址','异步true，同步false');
	xhr.open('get','demo.php',true);
	//console.log('open',xhr.readyState);//1  发送请求（包含准备请求）

	//3.发送 send()
	xhr.send();//xhr.send(null);
	//console.log('send',xhr.readyState);//1

	//4.监听回调函数
	xhr.onreadystatechange = function () {
	//console.log('函数',xhr.readyState);// 2 3 4
	//2服务器接收请求  3服务器处理请求  4服务器响应数据
	//判断----判断状态执行到第几个 0 1 2 3 4
	if (xhr.readyState == 4) {//执行的状态
		if (xhr.status == 200) {//200是http状态码  成功
			//响应数据
			console.log(xhr.response);
		}
	}

状态码

• xhr.readyState

0 初始化xhr对象
1 发送请求服务器
2 服务器接收请求
3 服务器处理数据
4 服务器处理完毕 响应数据

• http状态码

1xx 信息
2xx 成功 200
3xx 重定向 304 307
4xx 资源不存在 404
5xx 服务器错误 500 505

get post 参数请求

• get

• post