1 ajax的概念
2 XMLHttpRequest（简称XHR）对象
1） var xhr = new XMLHttpRequset( ) ; // IE8+ 以及其他所有浏览器都支持
2） xhr.open('get'/'post','url',false/true) ; // 准备发送请求，但还没有发送,true表示异步，false同步
3） xhr.send( 'data') ; //真正发送。 使用get方式则在url那里拼接所以这里传null，否则使用post要传data数据
5） xhr.open('get'/'post','url?data='+math.random( ),false/true) ; // 巧妙的避免了IE浏览器加载缓存数据
6）使用ajax异步发送请求和局部刷新，是ajax的真正核心：
var xhr = new HMLHttpRequest();xhr.onreadystatechange = function(){
if(xhr.status == 200){
// xhr.readystate 有5个值，0 1 2 3 4,4表示接收完成if( xhr.status == 200 && xhr.readyState == 4 ){ // 这里必须要这么判断，否则报错！原因就是3的时候也是200
// process responseText ;
}
}else{
//do nothing
}
}xhr.open('post',true);xhr.send(data);//xhr.abort() ; 阻止发送异步请求
3 GET 与 POST
1）get请求方式使用url携带参数，一般的url请求就是使用get
url?name=value&name=value2
2）post请求方式使用url+参数发送的方式，一般表单提交或者重要数据发送时
xhr.send('name=value&name1=value2');
3）头信息有两种：
响应头信息：服务器返回的信息，客户端可以获取，但是不可以设置、
xhr.getAllResponseHeader(); xhr.getResponseHeader('Content-Type');
请求头信息：客户端发送信息，客户端可以设置但不可以获取。
xhr.setRequestHeader('name',value ); 在open 与 send 之间设置
4）解决中文乱码问题：Ajax从服务器返回的数据是默认采用utf-8编码，那么需要对所有编码设置为utf-8，而且对文本编辑器也要设置utf-8 的编码方式！对于特殊字符处理比如参数中有&或？，那么需要采用encodeUrlComponent函数处理。
5）自己编写 封装 ajax 的方法！
<script type="text/javascript" charset="utf-8">
function
ajax(obj){
var xhr = new XMLHttpRequest();var method = '' ;if(obj.method == 'get'){
// get 请求方式
method = 'get';
obj.url = obj.url+'?'+obj.data;
}else{
// 默认 post 请求方式
method = 'post';
}if(obj.asyn){
// 异步发送请求处理
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){obj.success(xhr.responseText);}
}
}xhr.open(method,obj.url,obj.asyn);if(method == 'post'){
xhr.send(obj.data);
}else{
xhr.send(null);
}if(!obj.asyn){
// 同步发送请求处理
if(xhr.status == 200){
obj.success(xhr.responseText);
}
}
}
window.onload = function(){
var form = document.forms[0];
form.addEventListener('submit',function(event){
event.preventDefault();ajax( {
method:'get',url:'http://localhost:8080/test/data.txt',asyn:false,data:'name=hello',success:function(result){
var jsonObj = JSON.parse(result);
alert(jsonObj[1].name+':'+jsonObj[1].age);
}});
},false);
}
</script>
原文链接：https://www.f2er.com/ajax/165334.html