传统的 web 交互是用户触发一个 http 请求服务器, 然后服务器收到之后, 在做出响应到用户, 并且返回一个新的页面,, 每当服务器处理客户端提交的请求时, 客户都只能空闲等待, 并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据, 都要返回一个完整的 html 页, 而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽,由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
什么是 ajaxajax 的出现, 刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest 对象XMLHttpRequest 对象是 ajax 的基础, XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。目前所有浏览器都支持 XMLHttpRequest
方 法 | 描 述 |
abort() | 停止当前请求 |
getAllResponseHeaders() | 把 HTTP 请求的所有响应首部作为键 / 值对返回 |
getResponseHeader("header") | 返回指定首部的串值 |
open("method","URL",[asyncFlag],["userName"],["password"]) | 建立对服务器的调用。method 参数可以是 GET、POST 或 PUT。url 参数可以是相对 URL 或绝对 URL。这个方法还包括 3 个可选的参数,是否异步,用户名,密码 |
send(content) | 向服务器发送请求 |
setRequestHeader("header", "value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用 open()。设置 header 并和请求一起发送 ('post'方法一定要) |
1. 创建 XMLHTTPRequest 对象
2. 使用 open 方法设置和服务器的交互信息
3. 设置发送的数据,开始和服务器端交互
4. 注册事件
5. 更新界面
下面给大家列出 get 请求和 post 请求的例子
get 请求:} post 请求:
- //步骤一:创建异步对象
- var ajax = new XMLHttpRequest();
- //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
- ajax.open('get', 'getStar.php ? starName = ' + name);
- //步骤三:发送请求
- ajax.send();
- //步骤四:注册事件 onreadystatechange 状态改变就会调用
- ajax.onreadystatechange = function() {
- if (ajax.readyState == 4 && ajax.status == 200) {
- //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
- console.log(xml.responseText); //输入相应的内容
- }
- //创建异步对象
- var xhr = new XMLHttpRequest();
- //设置请求的类型及url
- //post请求一定要添加请求头才行不然会报错
- xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
- xhr.open('post', '02.post.php');
- //发送请求
- xhr.send('name = fox & age = 18');
- xhr.onreadystatechange = function() {
- // 这步为判断服务器是否正确响应
- if (xhr.readyState == 4 && xhr.status == 200) {
- console.log(xhr.responseText);
- }
- };
为了方便使用, 我们可以把他封装进方法里面, 要用的时候, 直接调用就好了
- function ajax_method(url, data, method, success) {
- // 异步对象
- var ajax = new XMLHttpRequest();
- // get 跟post 需要分别写不同的代码
- if (method == 'get') {
- // get请求
- if (data) {
- // 如果有值
- url += ' ? ';
- url += data;
- } else {}
- // 设置 方法 以及 url
- ajax.open(method, url);
- // send即可
- ajax.send();
- } else {
- // post请求
- // post请求 url 是不需要改变
- ajax.open(method, url);
- // 需要设置请求报文
- ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
- // 判断data send发送数据
- if (data) {
- // 如果有值 从send发送
- ajax.send(data);
- } else {
- // 木有值 直接发送即可
- ajax.send();
- }
- }
- // 注册事件
- ajax.onreadystatechange = function() {
- // 在事件中 获取数据 并修改界面显示
- if (ajax.readyState == 4 && ajax.status == 200) {
- // console.log(ajax.responseText);
- // 将 数据 让 外面可以使用
- // return ajax.responseText;
- // 当 onreadystatechange 调用时 说明 数据回来了
- // ajax.responseText;
- // 如果说 外面可以传入一个 function 作为参数 success
- success(ajax.responseText);
- }
- }
- }
来源: http://www.bubuko.com/infodetail-2451860.html