【Ajax】课程笔记总结 一.
1.1 什么是AJAX
AJAX就是不刷新页面而到服务器获取数据的一门技术。
异步：发送请求后不等返回结果，由回调函数处理结果
JavaScript:向服务器发起请求，获得返回结果，更新页面
XML：封装数据，起到一个传输的作用
1.1 Ajax原理
同步：客户向服务器发送请求，服务器在处理的时候客户端在等待，客户在阅读页面的时候服务器在等待，客户端和服务器端的步调一致，称之为同步。
异步：浏览器界面要取服务器获取数据，浏览器界面不离开当前页面，他将取数据的工作交给AJAX引擎(XMLHttpRequest对象，这个对象在客户端浏览器上)，AJAX去服务器去数据，并且将服务器返回的数据交给浏览器界面。
1.1 创建AJAX对象
AJAX 的核心是JavaScript对象XMLHttpRequest
主流浏览器方式：支持火狐、Google、Safari、Opera、包括IE7以上版本浏览器。
ie5,6,7,8
关于参数的问题
var request= new ActiveXObject(“Microsoft.XMLHTTP”); //最原始方式
var request = new ActiveXObject(“Msxml2.XMLHTTP”); //升级
var request = new ActiveXObject(“Msxml2.XMLHTTP.3.0”); //升级
var request = new ActiveXObject(“Msxml2.XMLHTTP.6.0”); //IE维护的最高版本
创建一个兼容的ajax对象
1.5 建立对服务器的连接
通过ajax对象的open()方法创建一个对服务器的HTTP请求
语法：ajax对象.open(‘请求的方式 get|post’，‘地址 url，[是否异步，默认是true，异步])；
1.6 向服务器发起请求
通过ajax对象带send send()方法向服务器发送请求
语法：ajax对象.send()
在审查元素中查看ajax请求的情况
1.7 接受服务器返回的信息
客户端可以接受服务器返回的字符串、XML、json数组。
服务器页面执行的结果就是AJAX获取的内容，ajax将PHP运行的结果带回到客户端来。客户端通过ajax对象.ResponseText来回去返回的字符串。
原因：
但客户端点击了按钮的时候，要走两个线程一条往服务器方向走 ，一条在客户端继续执行，继续执行的线程是获取服务器返回的数据，但是那时候服务器的数据根本没有返回来，所以获取的数据是空。
解决：
我们给AJAX执行的过程划分为5个状态(0-4),每个状态发生变化的时候都会返回通知一下客户端，客户端通过状态决定需要做的操作。
onreadystatechange 表示状态发生改变。
Status表示数据返回的状态码：200表示OK
1.8 Get提交数据
在get提交数据的过程中，会出现两个问题
1、如果数据里面有 =、& 将会与提交字符串中的关键字相混肴。
2、在ie浏览器中，不能直接提交中文。
解决方法 ：通过 encodeURIComponent()进行编码即可。
HTML代码
<script type="text/javascript">
function fun(){
var username=document.getElementById('username').value;
username=encodeURIComponent(username); //将数据进行编码
var req=new XMLHttpRequest();
req.open('get','4-demo.php?username='+username); //get提交数据
req.onreadystatechange=function(){
if(req.readyState==4 && req.status==200){
var str=req.responseText;
alert(str);
}
}
req.send(null); //如果没有post提交就写null
}
</script>
用户名：<input type="text" name="" id="username" onblur='fun()'>
PHP代码
<?php
print_r($_GET);
运行结果
1.9 Post提交数据
1、post提交的数据在send()函数中传递
2、post提交在send()方法前必须设置将传递的数据组织成XML格式，语法结构是：
setRequestHeader('Content-Type','application/x-www-form-urlencoded')，注意：这句话必须写在send之前。
3、传递中文的时候不需要编码，但是特殊符号&、=仍然需要编码
4、在POST提交数据的同时可以进行get传递
HTML页面
setRequestHeader('Content-Type','application/x-www-form-urlencoded')，
