码迷,mamicode.com
首页 > Web开发 > 详细

Ajax技术

时间:2018-04-15 22:58:17      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:post请求   拍照   发送请求   win   send   事件   异步   参数   fun   

ajax是一个很重要的技术。

什么是ajax,用w3c的解释就是,

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

这么说有点让人费解,用通俗的话说就是

就是没用AJAX的网页,你点一个按钮就要刷新一下页面,尽管新页面上只有一行字和当前页面不一样,但你还是要无聊地等待页面刷新。

用了AJAX之后,你点击,然后页面上的一行字就变化了,页面本身不用刷。

举个例子:

大学毕业拍毕业照,全班30人,一共去了29人。可是拍完之后,没参与照相的同学也想出现在照片中,该怎么办呢?

传统方式:大家再召集一次,重新拍一张。

Ajax:把这名同学PS进去

这就是Ajax的特点:

可以在不重新召集所有同学拍照的情况下,对照片的部分进行更新。

可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 (重新拍照理解为重新加载网页)

AJAX只是一种技术,不是某种具体的东西。不同的浏览器有自己实现AJAX的组件。

 

因为ajax的完整用法太多了,我就简单写一下他的使用步骤,

第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。
//这里要针对不同的浏览器
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器,比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。
xmlhttp.open(method,url,async) method包括get 和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)
xhttp.send();使用get方法发送请求到服务器。
xhttp.send(string);使用post方法发送请求到服务器。
post 发送请求什么时候能够使用呢?
(1)更新一个文件或者数据库的时候。
(2)发送大量数据到服务器,因为post请求没有字符限制。
(3)发送用户输入的加密数据。

第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
使用responseText属性得到服务器响应的字符串数据,使用responseXML属性得到服务器响应的XML数据。
eg:document.getElementById("demo").innerHTML = xhttp.responseText;

第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。
readyState属性,XMLHttpRequest对象的状态,改变从0到4,0代表请求未被初始化,1代表服务器连接成功,2请求被服务器接收,3处理请求,4请求完成并且响应准备。
status属性,200表示成功响应,404表示页面不存在。
在onreadystatechange事件中,服务器响应准备的时候发生,当readyState==4和status==200的时候服务器响应准备。
eg:
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
//函数作为参数调用
<!DOCTYPE html>
<html>
<body>
<p id="demo">Let AJAX change this text.</p>
<button type="button"
onclick="loadDoc(‘index.aspx‘, myFunction)">Change Content
</button>
<script>
function loadDoc(url, cfunc) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cfunc(xhttp);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>

 

当然这只是一些简单的用法,在w3c上面还有一些高级用法,例如利用ajax从数据库读取信息,读取XML的信息等。

最后想说,对于做后台开发的来说,ajax是一门很重要的技术,前端也是!

Ajax技术

标签:post请求   拍照   发送请求   win   send   事件   异步   参数   fun   

原文地址:https://www.cnblogs.com/douflamingo-666/p/8849656.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!