JavaScript Ajax编程 应用篇


Posted in Javascript onJuly 02, 2016

一、Ajax  (Asynchronous JavaScript + XML)  能够像服务器请求额外的数据而无需卸载页面,即局部刷新技术
二、创建一个XHR对象

function createXHR () {
 if (typeof XMLHttpRequest != "undefined") {
  return new XMLHttpRequest();
 } else if (typeof ActiveXObject != "undefined") { // < Ie7 
  if (typeof arguments.callee.activeXString != "string") {
  var version = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
   i, len;
  for ( i = 0, len = version.length; i < len; i++) {
   try { 
   new ActiveXObject(version[i]);
   arguments.callee.activeXString = version[i];
   break;
   } catch (ex) {}
  }
  }
  return new ActiveXObject(arguments.callee.activeXString);
 } else {
  throw new Error("No Support For XHR");
 }
 }
 var xhr = createXHR();
 alert(xhr); // [object XMLHttpRequest]

三、用法    注意:本节的实例都应用于服务器端
    1.调用open()方法。它接受3 个参数:要发送的请求的类型("get"、"post"等)、请求的URL 和表示是否异步发送请求的布尔值。
    2.要发送请求,调用send()方法,接受一个参数,即要作为请求发送的主体。如果不需要,则为null
    3.返回的数据会自动填充到XHR对象的属性中。   

var xhr = createXHR();
 // GET方式同步打开example.txt文件
 // 同步:javascript代码会等待服务器响应后执行
 xhr.open("get", "example.txt", false);
 xhr.send(null);
 // status代表响应的http状态
 // 200代表ok,304表示缓存
 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  alert(xhr.responseText); // 返回响应的文本,123456
 } else {
  alert("Request was unsuccessful: " + xhr.status);
 }

    4.example.text文件内容为字符串: 123456

四、前面的使用的同步的方式,当然不会存在问题,所有我们要挑战一个异步的方法。   

var xhr = createXHR();
 // xhr.readyState表示请求/响应的当前状态,4代表已经接受了全部的响应数据
 // 另外只要xhr.readyState的值发生了改变,那么xhr.onreadystatechange事件就会触发
 xhr.onreadystatechange = function(){
 if (xhr.readyState == 4){
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  alert(xhr.responseText);
  } else {
  alert("Request was unsuccessful: " + xhr.status);
  }
 }
 };
 xhr.open("get", "example.txt", true);
 xhr.send(null);

五、每个HTTP 请求和响应都会带有相应的头部信息
    1.默认情况下,在发送XHR 请求的同时,还会发送下列头部信息。
        ①Accept:浏览器能够处理的内容类型。
        ②Accept-Charset:浏览器能够显示的字符集。
        ③Accept-Encoding:浏览器能够处理的压缩编码。
        ④Accept-Language:浏览器当前设置的语言。
        ⑤Connection:浏览器与服务器之间连接的类型。
        ⑥Cookie:当前页面设置的任何Cookie。
        ⑦Host:发出请求的页面所在的域。
        ⑧Referer:发出请求的页面的URI。
        ⑨User-Agent:浏览器的用户代理字符串。
    2.使用setRequestHeader()方法可以设置自定义的请求头部信息。接受两个参数:头部字段的名称和头部字段的值      

var xhr = createXHR();
 // xhr.readyState表示请求/响应的当前状态,4代表已经接受了全部的响应数据
 // 另外只要xhr.readyState的值发生了改变,那么xhr.onreadystatechange事件就会触发
 xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
   alert(xhr.responseText);
  } else {
   alert("Request was unsuccessful: " + xhr.status);
  }
  }
 };
 xhr.open("get", "example.txt", true);
 // 必须在open()之后调用
 xhr.setRequestHeader("name", "zhang"); // 在example.txt的http中可以看到接受的 "name" : "zhang"
 xhr.send(null);

    3.获取请求的头部信息和相应信息,调用getResponseHeader()方法getAllResponseHeaders()方法     

var xhr = createXHR();
 // xhr.readyState表示请求/响应的当前状态,4代表已经接受了全部的响应数据
 // 另外只要xhr.readyState的值发生了改变,那么xhr.onreadystatechange事件就会触发
 xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
   // 获取响应头的Content-Type
   var connection = xhr.getResponseHeader("Content-Type");
   // alert(connection); // text/plain
   // 获取所有的响应信息
   var all = xhr.getAllResponseHeaders();
   alert(all);
  } else {
   alert("Request was unsuccessful: " + xhr.status);
  }
  }
 };
 xhr.open("get", "example.txt", true);
 xhr.send(null);

六、GET请求,前面我们已经讨论了GET请求的方法,现在我们来扩展一下,为GET请求添加一些参数

/**
 url : 不带请求的url
 name : 请求键
 value : 请求值
 return : 带请求字符串的url
 */
 function addURLParam(url, name, value) {
 url += (url.indexOf("?") == -1 ? "?" : "&");
 url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
 return url;
 }
 var xhr = createXHR();
 xhr.onreadystatechange = function(){
 if (xhr.readyState == 4){
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  alert(xhr.responseText);
  } else {
  alert("Request was unsuccessful: " + xhr.status);
  }
 }
 };
 var url = "example.txt";
 url = addURLParam(url, "name", "zhang");
 url = addURLParam(url, "age", "23");
 // 请求的url变成了:example.txt?name=zhang&age=23
 xhr.open("get", url, true);
 xhr.send(null);

七、POST请求
    1.案例分析:接下来我们共同讨论一个以post方法发送请求的ajax应用,即用户注册,根据你注册用户名返回提示。
    2.实现步骤
        1) 首先要有一个注册的页面(当然,这里很简陋)ajax.html         

<!DOCTYPE HTML>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>无标题文档</title>
  <style>
  </style>
  </head>
  <body>
  <form name="myForm" method="post">
  姓名:<input type="text" name="username" /><label id="userLabel">请输入用户名</label><br/>
  密码:<input type="password" name="password" /><br/>
   <input type="submit" value="登录" /><br/> 
  </form>
  <script src="EventUtil.js"></script>
  <script src="serialize.js"></script>
  <script src="ajax.js"></script>
  <script src="ajaxDo.js"></script>
  </body>
  </html>

        2) 接着当然是javascript部分
            ①EventUtil.js,这里只是将事件监听的部分列出来              

var EventUtil = {
   addEvent : function (element, type, handler) {
   if (element.addEventListener)
   {
    element.addEventListener(type, handler, false);
   } else if (element.attachEvent)
   {
    element.attachEvent("on" + type, handler);
   }
   }
  }

            ②serialize.js:表单序列化            

function serialize(form){
   var parts = [], field = null, i, len, j, optLen, option, optValue;
   for (i=0, len=form.elements.length; i < len; i++){
   field = form.elements[i];
   switch(field.type){
    case "select-one":
    case "select-multiple":
    if (field.name.length){
    for (j=0, optLen = field.options.length; j < optLen; j++){
     option = field.options[j];
     if (option.selected){
     optValue = "";
     if (option.hasAttribute){
      optValue = (option.hasAttribute("value") ?
      option.value : option.text);
     } else {
      optValue = (option.attributes["value"].specified ?
      option.value : option.text);
     }
     parts.push(encodeURIComponent(field.name) + "=" +
     encodeURIComponent(optValue));
     }
    }
    }
    break;
    case undefined: //字段集
    case "file": //文件输入
    case "submit": //提交按钮
    case "reset": //重置按钮
    case "button": //自定义按钮
    break;
    case "radio": //单选按钮
    case "checkbox": //复选框
    if (!field.checked){
    break;
    }
    /* 执行默认操作*/
    default:
    //不包含没有名字的表单字段
    if (field.name.length){
     parts.push(encodeURIComponent(field.name) + "=" +
     encodeURIComponent(field.value));
    }
   }
   }
   return parts.join("&");
  }

            ③ajax.js,就是上面的那个createXHR()函数,这里就不罗列了。
            ④ajaxDo.js,核心文件,就是我们操作部分,这个名字乱写的。
              

var form = document.forms[0]; // 获取表单
  var username = form.elements['username']; // 用户名
  var userLabel = document.querySelector("#userLabel"); // 提示标签
  EventUtil.addEvent(username, "blur", function() {
   var xhr = createXHR();
   xhr.onreadystatechange = function(){
   if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
    var text = xhr.responseText;
    // 当为true时,提示绿色字体
    // 当为false时,提示为红色字体
    if(text) {
     userLabel.style.color = "green";
     userLabel.firstChild.data = "恭喜你,用户名可用";
    } else {
     userLabel.style.color = "red";
     userLabel.firstChild.data = "对不起,该用户已存在";
    }
    } else {
    alert("Request was unsuccessful: " + xhr.status);
    }
   }
   };
   // POST请求
   xhr.open("post", "dome.php", true);
   // 提交的内容类型
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   // 将表单序列化
   xhr.send(serialize(form));
  });

    3.改进部分:大家都看见了,刚才在提交表单时,我们序列化了表单。在XMLHttpRequest 2 级为此定义了FormData 类型,它会自动为我们序列化表单,不需要我们自己写了。
        我们只动部分代码       

// ...此处省略代码和上面一致
 // POST请求
 xhr.open("post", "dome.php", true);
 // 仅仅这里需要改动,代替之前serialize.js中的函数
 xhr.send(new FormData(form));

八、其他部分(了解,因为兼容性还不够)
    1.超时设定      

xhr.open("get", "example.txt", true);
 xhr.timeout = 1000; //将超时设置为1 秒钟(仅适用于IE8+)
 xhr.ontimeout = function(){
 alert("Request did not return in a second.");
 };
 xhr.send(null);

    2.overrideMimeType()方法,针对服务器返回的类型  

var xhr = createXHR();
 xhr.open("get", "example.txt", true);
 xhr.overrideMimeType("text/xml"); // 之前的是text/plain
 xhr.send(null);

    3.进度事件
        1.load事件,只要浏览器收到服务器的信息就触发     

var xhr = createXHR();
  xhr.onload = function(){
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
   alert(xhr.responseText);
  } else {
   alert("Request was unsuccessful: " + xhr.status);
  }
  };
  xhr.open("get", "example.txt", true);
  xhr.send(null);

        2.progress事件,浏览器接收新数据期间周期性地触发         

var xhr = createXHR();
  xhr.onprogress = function(event){
  var divStatus = document.getElementById("status");
  // 计算从响应中已经接收到的数据的百分比
  if (event.lengthComputable){
   divStatus.innerHTML = "Received " + event.position + " of " +
   event.totalSize +" bytes";
  }
  };
  xhr.open("get", "altevents.php", true);
  xhr.send(null);

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
js跨域资源共享 基础篇
Jul 02 #Javascript
JavaScript数据存储 Cookie篇
Jul 02 #Javascript
JavaScript实现简单的拖动效果
Jul 02 #Javascript
jQuery插件简单学习实例教程
Jul 01 #Javascript
jquery插件autocomplete用法示例
Jul 01 #Javascript
AngularJS 避繁就简的路由
Jul 01 #Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 #Javascript
You might like
php socket实现的聊天室代码分享
2014/08/16 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
jQuery客户端分页实例代码
2013/11/18 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
Windows下python3.7安装教程
2018/07/31 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
Java面试题:为什么要用Java
2012/05/11 面试题
各营销点岗位职责范本
2014/03/05 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
2014年信用社工作总结
2014/11/25 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL