ajax 基础学习

发布时间：2020-12-16 00:43:01 所属栏目：百科来源：网络整理

导读：1 ajax的概念 1）2005年Jesse James Garrett发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。 2）Ajax，是Asynchronous JavaScript + XML的简写。这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验

1 ajax的概念

1）2005年Jesse James Garrett发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。

2）Ajax，是Asynchronous JavaScript + XML的简写。这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。

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数据

4） xhr.responseText ; responseXml,status,statusText // 获取从服务器端获取的数据文本，IE获取的是缓存数据，所以要进行缓存清理

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() ; 阻止发送异步请求

使用异步调用的时候，需要触发readystatechange事件，然后检测readyState属性即可。这个属性有五个值：

值

状态

说明

0

未初始化

尚未调用open()方法

1

启动

已经调用open()方法，但尚未调用send()方法

2

发送

已经调用send()方法，但尚未接受响应

3

接受

已经接受到部分响应数据这个时候 xhr.status == 200,那么数据接收还不全导致处理异常

4

完成

已经接受到全部响应数据，而且可以使用这个时候 xhr.status == 200,完全就收数据

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 的方法！

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!