ajax入门学习

发布时间：2020-12-15 21:32:10 所属栏目：百科来源：网络整理

导读：一、Ajax：异步的JavaScript和XML。它不是一项新技术，只是几种技术的组合。是(X)HTML、CSS、JavaScript、DOM的组合。二、Ajax原理：客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求，当服务器返回响应时，会调用先前声明的回调函数，在回调函数

一、Ajax：异步的JavaScript和XML。它不是一项新技术，只是几种技术的组合。
是(X)HTML、CSS、JavaScript、DOM的组合。

二、Ajax原理：
客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求，当服务器返回响应时，会调用先前声明的回调函数，在回调函数中可以使用JavaScript操作DOM来更新页面。
异步请求不会阻塞客户端的操作，达到页面无刷新的效果。

三、XMLHttpRequest对象：
属性：
onreadstatechange 状态改变事件的引用句柄。指定一个回调函数的名
readyState 对象的状态：0、1、2、3、4
responseText 服务器返回的响应文本数据
responseXML 服务器返回的响应XML文档对象
status 服务器返回的HTTP状态码：200、404、500

方法：
open("method","url",asyncFlag); 创建一个请求
send(content); 发送请求。content指的是要添加到请求消息体中的内容
setRequestHeader("名","值"); 设置请求的头部信息
getAllResponseHeaders(); 获取服务器响应消息的所有头部信息
getResponseHeader("名"); 获取指定名称对应的头部信息值

四、异步请求的封装：
var xhr = false;
//step1: 创建一个兼容各种浏览器版本的XMLHttpRequest对象
if (window.XMLHttpRequest) { //Mozilla浏览器
xhr = new XMLHttpRequest();
} else {
if (window.ActiveXObject) { //IE浏览器
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP"); //ie6以上
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}

}

}
}
}

//step2: 设置回调函数
xhr.onreadystatechange = myCallback;

//step3: 创建一个异步请求
xhr.open("method",true);
//设置请求数据的编码方式
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//step4: 发送异步请求
xhr.send(content); //如果是GET方式,content为null;若为POST,content为“名=值”对。

五、回调函数模板：
function myCallback(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//处理服务器返回的响应数据
var str = xhr.responseText;
//var myDoc = xhr.responseXML;
}else {
//提示异常
}
}
}

六、Ajax和服务器之间的数据传递：
客户端向服务器发起请求
★1.使用"名=值"对： paramName1=value1&paramName2=value2&...
2.使用XML： <label>....</label>
3.使用JSON：是ECMA262的规范的子集(JavaScript1.2)。
在客户端把JSON格式的数据转换成字符串(使用json官方提供的json2.js)
var str = JSON.stringify(json);

服务器响应客户端 1.字符串： 2.使用XML: 在客户端需要使用DOM来解析它 ★3.使用JSON：在服务器端先把对象数据转换成JSON格式的字符串发送给客户端。(使用json官方提供的org.json包，jackson包) 在客户端把接收到的JSON格式字符串转换成JSON对象。(使用json官方提供的json2.js) 七、JSON的语法：轻量级的数据交换格式。数据类型格式： String "字符序列" 不能用单引号 Number 整型、浮点型 Boolean true、false Null值 null 数组 ["元素1",true,null] 对象 {"属性名":值,"属性名":值}

（编辑：李大同）

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