Fork me on GitHub

ajax复习

ajax是一种在不刷新页面的情况下,局部更新数据的一种技术,XMLHTTPRequest对象是ajax的基础。 使用ajax有以下4个步骤: (1)创建XMLHTTPRequest对象 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
兼容性写法如下:

1
2
3
4
5
6
7
8
var xmlhttp; 
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

(2)向服务器发送请求 这里我们使用open()和send()方法 open(method,url,flag),open()方法中有三个参数: method:请求方式,有get和post两种;
url:要请求页面的地址,相对地址或绝对地址
flag:true是异步,false是同步

注意点:(1)get和post的比较:get传输数据小且不安全,post传输数据大且安全;
(2)使用post方式时,注意添加http请求头协议; send(string),send()中有一个参数,当使用GET方式请求时,里面没有参数,使用post方式时,里面写上传输的数据; 示例get请求:

1
xmlhttp.open('get','123.php',true); xmlhttp.send();

示例post请求:

1
2
3
4
xmlhttp.open('post','123.php','true'); 
//添加http请求头信息
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=lili&age=10");

(3)服务器的响应 responseText 获得字符串形式的响应数据。 responseXML 获得 XML 形式的响应数据。
(4)onreadystatechange 事件 当请求被发送到服务器时,我们需要执行一些基于响应的任务。 每当 readyState 改变时,就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性: onreadystatechange属性,每当readyState属性变化时就会调用该函数;
readyState属性,它有四种状态变化: 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 status属性 200: “OK” 404: 未找到页面 所以当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
示例:

1
2
3
4
xmlhttp.onreadystatechange=function() { 
if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

jQuery中的ajax 在jQuery中我们有$.get()、$.post()、$.ajax()方法来向服务器发送数据
(1)$.get() $.get(url,data,success(),datatype) url:必填; data:可选,规定请求的同时发送的数据; success():可选,请求成功时运行的函数; datatype:可选,服务器响应的数据类型,JQuery会只能判断;
(2)$.post()方法差不多 url:必填; data:可选,规定请求的同时发送的数据; success():可选,请求成功时运行的函数; datatype:可选,服务器响应的数据类型,JQuery会只能判断;
(3)$.ajax()方法可以替换上面两种方法,定制自由度更高,以下是常用属性;
$.ajax({ url:’01.php’,//请求地址
data:’name=fox&age=18’,//发送的数据 type:’GET’,//请求的方式
success:function (argument) {},// 请求成功执行的方法
beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理
error:function (argument) {console.log(argument);},//请求失败调用 })

-------------本文结束感谢您的阅读-------------

本文标题:ajax复习

文章作者:陈晓拉尼

发布时间:2017年08月24日 - 12:08

最后更新:2018年09月11日 - 00:09

原始链接:http://yoursite.com/archives/26052.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。