AJAX

 

定义

　　　　   Asynchronous Javascript And XML　　异步JavaScript和XML
　　　　　　一种创建交互式网页应用的网页开发技术
　　　　　　一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
　　　　　　注意

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术，AJAX本身也是基于JS代码实现功能的

用途   

　　　　　　使网页实现异步更新，可以使网页在不重新加载整个网页的情况下，对网页的某部分进行更新。

 　　　　　（局部刷新）

使用
　　　　原理 

　　　　　　　  1 使用Javascript向服务器提出请求并处理响应

　　　　　　　2 Ajax 的核心是 JavaScript 对象 XMLHttpRequest，XMLHttpRequest使我们可以使用 JavaScript

　　　　　　　　向服务器提出请求并处理响应，而不阻塞用户
　　　　　　　3 流程图示

　　　　　　　　　　　　　　

　　　　操作流程
　　　　　　GET方式操作流程
　　　　　　　　　1 获取对象/创建请求对象 ------>　var ajax = new XMLHttpRequest();
　　　　　　　　　2

　　　　　　　　　　　2.1 请求初始化

　　　　　　　　　　　　2.1.1 让对象知道要以什么方式打开(加载)谁
　　　　　　　　　　　　2.1.2 ajax.open('get','./1.php',true);

　　　　　　　　　　　　　　　open(请求的方式，请求的文件,异步true/同步false)

　　　　　　　　　　　2.2 配置参数
　　　　　　　　　　　　2.2.1ajax.open('get','./1.php?name=jack&age=18',true);

　　　　　　　　  3 正式发送请求 ----> ajax.send();  -----> 括号里可以写字符串，但仅限于使用POST方式时

　　　　　　　　　　4 判断请求是否已响应，设置回调函数
　　　　　　　　　　　4.1判断请求是否已响应，并且告诉ajax请求成功后接下去该干啥

　　　　　　　　　　   4.2　ajax.onreadystatechange=function(){
　　　　　　　　　　　　　　　　if(ajax.status==200 && ajax.readyState == 4){
　　　　　　　　　　　　　　　　　　　alert(ajax.responseText);
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　   4.2.1 onreadystatechange
　　　　　　　　　　　　　4.2.1.1　存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
　　　　　　　　　　　　　4.2.1.2  readyState
　　　　　　　　　　　　　　　存有 XMLHttpRequest 的状态。从 0 到 4 发生变化    
　　　　　　　　　　　　　　　　onreadystatechange 事件被触发 4 次，对应着 readyState 的每个变化
　　　　　　　　　　　　            0: 请求未初始化
　　　　　　　　　　　　　　　　1: 服务器连接已建立
　　　　　　　　　　　　　　　　2: 请求已接收
　　　　　　　　　　　　　　　　3: 请求处理中
　　　　　　　　　　　　　　　　4: 请求已完成，且响应已就绪
　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　4.3 status
　　　　　　　　　　　　　　200---->"OK"
　　　　　　　　　　　　　   404----->未找到页面

　　　　　　POST方式操作流程
　　　　　　　　1 获取对象/创建请求对象　　var ajax = new XMLHttpRequest();
　　　　　　　　2 请求初始化　　

　　　　　　　　　　2.1 让对象知道要以什么方式打开(加载)谁
　　　　　　　　　   2.2 ajax.open('post','./1.php',true); 

　　　　　　　　　　　　　　　------->   open(请求的方式，请求的文件,异步true/同步false)
　　　　　　　　3
　　　　　　　　　  3.1 设置请求头部信息

　　　　　　　　　　　　ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
　　　　　　　　　  3.2　正式发送请求

　　　　　　　　　　　　ajax.send('name=jack&age=18');　　括号里可以写字符串作为POST请求的参数
　　　　　　　   4 判断请求是否已响应，设置回调函数
　　　　　　　　　　4.1　判断请求是否已响应，并且告诉ajax请求成功后接下去该干啥
　　　　　　　　　　4.2　ajax.onreadystatechange=function(){
　　　　　　　　　　　　　  if(ajax.status==200 && ajax.readyState == 4){
　　　　　　　　　　　　　　　　alert(ajax.responseText);
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　}

　　处理数组

　　　　* 前端辅助函数　　eval()

　　　　　　　　　　　　　将字符串变成可以执行的代码

　　　　* 后端辅助函数　　php　　　json_encode($arr)

　　　　　　　　　　　　  将数组转化为字符串格式，该字符串形式为json格式　　{name: "jack", age: 18}

　　　　注意
　　　　　　　　ajax只有在服务器环境中才会看到效果
　　　　　　　　ajax请求内传递的内容都是字符串格式的
　　　　　　　　使用POST方式时，必须要设置添加POST的请求头
　　　　　　　　get方式配置参数时，参数写在open()的URL内
　　　　　　　　post方式配置参数时，参数写在send()的()内