AJAX技术初探
Posted 考拉的墨尔本
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX技术初探相关的知识，希望对你有一定的参考价值。
在所有的前端开发中，包括网页，android，ios等等，都需要和服务器交换数据，那么在网页开发中，我们可以使用AJAX技术实现和服务器数据的交互。
1.学习AJAX之前的准备知识
1.同步—-多个事情按照顺序执行，彼此不能交叉，通俗来讲就是如果一件事情没有执行结束，第二件事情是不能执行的，只有等到第一个事情执行结束，第二件事情才可以开始执行。 2.异步—多个事情可以同时执行，彼此不相关。通俗来说就是可以同时做多件事情，举个简单的例子就是在生活中我们边烧水边做饭，它们彼此之间没有影响。 3.get/post请求—-是http协议下向服务器发生请求的两种方式。get请求将请求参数拼接在url的后面，post请求则是将参数放在报文的内部。 4.回调函数—-回调函数一般是作为主函数的参数传入，并且当主函数达到某种条件时才会执行的函数。
2.AJAX是什么
学习AJAX，首先要知道AJAX是什么，要用一个起码的印象，百科上对AJAX技术的解释是—-是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 对于上面的解释可能有人看不太懂，我们可以在详细的介绍一下: 1.首先—-AJAX是一种网页开发技术，这没什么好说的，所有人肯定都能看懂 2.其次—-AJAX是以异步的方式实现更新，即我们在提交请求的同时页面不必等待请求的结果，在这个过程中页面可以做其他的操作。 3.最后---我们可以利用AJAX技术在不重新加载整个页面的情况下对页面的局部进行更新，客户体验很好。3.第一个AJAX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>第一个ajax程序</title>
</head>
<body>
<!-- 写信的步骤:
1.准备材料
2.开始写信
3.发送信件
4.收到回信
5.阅读回信
-->
<script type="text/javascript">
//1.创建ajax请求对象
var xhr=new XMLHttpRequest();
//2.初始化请求对象
// -使用xhr.open(参数1，参数2，参数3)方法初始化请求对象，
// 参数1--请求方式(get/post);参数2--url地址;参数3--是否异步(true/false)
xhr.open("get","ajaxTest.json",true);
//3.发送请求
// -通过xhr.send()方法发送请求对象，不需要任何参数。
xhr.send();
//4.根据状态码接收返回数据
// -ajax请求过程中通过onreadystatechange()方法来监听状态码，根据状态码来判断请求的实现过程
// readyState表示ajax状态码,一共有五个状态
// 0:xhr对象建立
// 1:open初始化完成
// 2:send发送请求成功
// 3:正在接受数据
// 4:数据接受完成
// status表示http请求状态码
// 200 请求成功
// 304 使用缓存
// 403 访问权限不足
// 404 资源找不到
// 500以上表示服务端错误
xhr.onreadystatechange=function()
if(xhr.status==200||xhr.status==304)
if(xhr.readyState==4)
console.log(xhr.readyState);
//5.查看接受的数据
console.log(xhr.responseText);
</script>
</body>
</html>4.总结
上面就是一个简单但却比较完整的ajax请求，我们可以类比日常生活中写信的过程来比喻实现ajax的过程， 但是要注意ajax是遵循 http协议的，所以在测试ajax例子的时候需要在本地搭建服务器，这里推荐一个本地搭建服务器的神器–WAMPSERVER，在网上搜索下 载下来一路安装就可以了。
以上是关于AJAX技术初探的主要内容，如果未能解决你的问题，请参考以下文章