javascript基础--ajax

引言

ajax是一项无重新加载异步刷新页面的一种方式，提高了工作效率。譬如：智能提示搜索，留言板，表单提示功能等。可以防止阻塞，异步地与服务器进行交互。接下来从0开始学习ajax。

1.javascript的ajax实现

javascript实现ajax的方式是通过一个XMLHttpRequest对象实现。代码结构为：

var xhr = null;if(window.XMLHttpRequest){    xhr = new XMLHttpRequest();}else{    xhr = new ActiveXObject('Microsoft.XMLHTTP');}xhr.onreadystatechange = function(){    //readystate状态有5种：        status状态：    //0: 请求未初始化              200：ok    //1: 服务器连接已建立           404：not found    //2: 请求已接收    //3: 请求处理中    //4: 请求已完成，且响应已就绪    if(xhr.readystate == 4 && xhr.status == 200){        //返回数据存储在responseText或者reseponseXML        //do something...    }}xhr.open('get/post',url,true/false);xhr.setRequestHeader("ContentType","application/x-www-form-urlencoded")//只有当method设置为post时，才添加setRequesteHeader，且放置在open和send之间//ContentType : multipart/form-data; application/x-www-form-urlencoded; text/plain三种值xhr.send(string);

---

稍微解释一下ContentType三个值。在Form元素的语法中，EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。

• application/x-www-form-urlencoded： 窗体数据被编码为名称/值对。这是标准的编码格式。
• multipart/form-data： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分
• text/plain： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符

如果form表单域不存在file上传域，则使用默认的application/x-www-form-urlencode足够了；如果form表单域存在file上传域则需当指定ContentType为multipart/form-data

2.jQuery的ajax实现

jQuery实现ajax的方式实质上是对javascript的xhr对象的封装，使之兼容各主流浏览器，代码结构为：

$.ajax({    type: 'GET/POST',    url:发送请求的地址,受同源策略影响    data: 是一个对象，连同请求发送到服务器的数据,{}    dataType: 预期服务器返回的数据类型,如'json','jsonp','xml'    success: function(data){},    error: function(jqXHR){}})

结束语

本文归纳了ajax的使用方式，属于最基本的使用阶段，要理解其中的原理，还得自己去深究