首页 > 代码库 > 前端之ajax

前端之ajax

2024-08-24 11:28:27   221人阅读

前端之ajax

本节内容

  1. ajax介绍
  2. 原生js实现ajax
  3. jquery实现ajax
  4. json
  5. 跨域请求

1. ajax介绍

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

  • 与服务器异步交互；
  • 浏览器页面局部刷新；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script type="text/javascript">
window.onload = function() {//当文档加载完毕时执行本函数
var form = document.getElementById("form1");//获取表单元素对象
form.onsubmit = function() {//给表单元素添加一个监听，监听表单被提交事件
var usernameValue = http://www.mamicode.com/form.username.value;//获取表单中名为username的表单元素值"usernameSpan");//得到username元素后的<span>元素
usernameSpan.innerText = "用户名不能为空！";//设置span元素内容！
return false;//返回false，表示拦截了表单提交动作
}
return true;//不拦截表单提交动作
};
};
</script>
</head>
<body>
<h1>注册页面</h1>
<form action="" method="post" id="form1">
用户名：<input type="text" name="username"/>
<span id="usernameSpan"></span>
<br/>
密　码：<input type="password" name="password"/>
<span id="passwordSpan"></span>
<br/>
<input type="submit" value="http://www.mamicode.com/注册"/>

</form>
</body>
</html>

同步交互与异步交互

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

ajax使用场景

当我们在百度中输入一个“老”字后，会马上出现一个下拉列表！列表中显示的是包含“传”字的4个关键字。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“传”字的前10个关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把这4个关键字显示在下拉列表中。

  • 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
  • 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为lemontree7777777的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

  • 整个过程中页面没有刷新，只是局部刷新了；
  • 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

ajax的优缺点

优点：

  • AJAX使用Javascript技术向服务器发送异步请求；
  • AJAX无须刷新整个页面；
  • 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

缺点：

  • AJAX并不适合所有场景，很多时候还是要使用同步交互；
  • AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
  • 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

2. 原生js实现ajax

ajax技术的四步操作

  • 创建核心对象；
  • 使用核心对象打开与服务器的连接；
  • 发送请求
  • 注册监听，监听服务器响应。

核心对象XMLHTTPRequest提供的方法

  • open(请求方式, URL, 是否异步)
  • send(请求体) # 键值对方式{key:value}
  • onreadystatechange，指定监听函数，它会在xmlHttp对象的状态发生变化时被调用 # (状态在0-4之间变化，状态一共有四种变化，1-4)
  • readyState，当前xmlHttp对象的状态，其中4状态表示服务器响应结束 # (状态从0-4)
  • status：服务器响应的状态码，只有服务器响应结束时才有这个东东，200表示响应成功；
  • responseText：获取服务器的响应体

原生js实现ajax的get请求

准备工作：

def login(request):
print(‘hello ajax‘)
return render(request,‘index.html‘)
# return HttpResponse(‘helloyuanhao‘)

def ajax_get(request):
return HttpResponse(‘helloyuanhao‘)

创建ajax核心对象：

其实AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。所有的异步交互都是使用XMLHttpRequest对象完成的。也就是说，我们只需要学习一个Javascript的新对象即可。

注意，各个浏览器对XMLHttpRequest的支持也是不同的！

  • 大多数浏览器都支持DOM2规范，都可以使用： var xmlHttp = new XMLHttpRequest()来创建对象；
  • 但IE有所不同，IE5.5以及更早版本需要：var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”)来创建对象；
  • 而IE6中需要：var xmlHttp = new ActiveXObject(“Msmxl2.XMLHTTP”)来创建对象；
  • 而IE7以及更新版本也支持DOM2规范。

为了处理浏览器兼容问题，给出下面方法来创建XMLHttpRequest对象：

function createXMLHttpRequest() {
var xmlHttp;
// 适用于大多数浏览器，以及IE7和IE更高版本
try{
xmlHttp = new XMLHttpRequest();
} catch (e) {
// 适用于IE6
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// 适用于IE5.5，以及IE更早版本
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){}
}
}
return xmlHttp;
}

打开与服务器的连接

当得到XMLHttpRequest对象后，就可以调用该对象的open()方法打开与服务器的连接了。open()方法的参数如下：

open(method, url, async)：

  • method：请求方式，通常为GET或POST；
  • url：请求的服务器地址，例如：/ajaxdemo1/AServlet，若为GET请求，还可以在URL后追加参数；
  • async：这个参数可以不给，默认值为true，表示异步请求；
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajax_get/", true);

发送请求

当使用open打开连接后，就可以调用XMLHttpRequest对象的send()方法发送请求了。send()方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。

注意：若没有参数，需要给出null为参数！若不给出null为参数，可能会导致FireFox浏览器不能正常发送请求！

xmlHttp.send(null);

接收服务器响应

当请求发送出去后，服务器端Servlet就开始执行了，但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。

XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态：

  • 0:初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；
  • 1:请求已开始，open()方法已调用，但还没调用send()方法；
  • 2：请求发送完成状态，send()方法已调用；
  • 3：开始读取服务器响应；
  • 4：读取服务器响应结束。

onreadystatechange事件会在状态为1、2、3、4时引发。

下面代码会被执行四次！对应XMLHttpRequest的四种状态！

xmlHttp.onreadystatechange = function() {
alert(‘hello‘);
};

但通常我们只关心最后一种状态，即读取服务器响应结束时，客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

前端之ajax


联系
我们