文档章节

ajax技术核心

杀丶破狼
 杀丶破狼
发布于 2014/06/30 11:25
字数 499
阅读 25
收藏 0
/**
 * AJAX技术核心
 * 
 * <input name="name" .../> 提交name
 * 
 * 1.创建XMLHTTPRequest
 * 2.设置回调函数
 * 3.使用open方法与服务器建立连接
 * 4.send,向服务器数据发送
 * 5.在回调函数针对不同响应状态进行处理
 */
var xmlhttp;
//用户名校验
//使用XMLHTTPrequest对象进行AJAX对象交互
function verify(){
 var name = document.getElementById("name").value;
 
 //创建XMLHTTPrequest对象
 //需要针对IE和其它类型的浏览器建立这个对象的不同方式写不同的代码
 if(window.XMLHttpRequest){
  //针对主流浏览器
  xmlhttp = new XMLHttpRequest();
  //针对某些版本的浏览器进行BUG修正
  if(xmlhttp.overrideMomeType){
   xmlhttp.overrideMimdeType("text/xml");
  }
 }else if(window.ActiveXObjext){
  //IE6,IE6-
  //两个可以用于创建XMLHttpRequest对象的控件名称保存在js数组中
  var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
  for(var i=0;i<activeName.length;i++){
   try {
    xmlhttp = new ActiveXObject(activeName[i]);
    break;
   } catch (e) {
    //
   }
  }
 }
 //确认XMLHTTPrequest对象创建成功
 if(!xmlhttp){
  alert("XMLHttpRequest对象创建失败");
 }else{
  //alert(xmlhttp);
 }
 
 //注册回调函数(函数名,不需要加括号)
 //如果加上括号,就会把函数的返回值注册上,error
 xmlhttp.onreadystatechange = callback;
 
 //设置连接信息
 //第三个参数表示采用异步还是同步方式交互,true为异步
 xmlhttp.open("GET","ajaxServlet?name="+name,true);
 
// xmlhttp.open("POST","ajaxServer",true);
 //POST需要自己设置http的请求头
// xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
 
 //发送数据,和服务器端进行交互
 //get方式的数据全部在url里面,所以为null
 xmlhttp.send(null);
 
 //POST方式发送数据
// xmlhttp.send("name="+name);
}
//回调函数
function callback(){
 //判断对象的状态是否交互完成
 if(xmlhttp.readyState == 4){
  //判断http的交互是否成功
  if(xmlhttp.status == 200){
   //使用responseXML的方式来接受xml数据对象
   var domObj = xmlhttp.responseXML;
   //利用getElementByTagName根据标签前面来获取元素
   var messageNode = domObj.getElementsByTagName("message");
   if(messageNode.length > 0){
    //var responseMessage = messageNode[0].innerHTML;
    var textNode = messageNode[0].firstChild;
    //nodeValue返回文本节点的文本内容
    var responseMessage = textNode.nodeValue;
    
    //将数据显示在页面上
    var divNode = document.getElementById("result");
    divNode.innerHTML = responseMessage;
   }else{
    alert("xml数据出错:"+xmlhttp.responseText);
   }
  }
 }
}

© 著作权归作者所有

共有 人打赏支持
杀丶破狼
粉丝 8
博文 63
码字总数 11552
作品 0
南京
程序员
私信 提问
Java——Ajax+Tomcat完成异步请求

Ajax最为网页异步交互技术相信大家并不陌生,这里我也不做过多介绍,详情点击(百度百科)。很多框架也封装了Ajax技术,使用起来更加简单,比如jQuery等等,这里为了了解原理,我们使用原生的...

邵鸿鑫
2015/10/30
0
0
[Ajax-相濡以沫,不如相忘于江湖] Ajax初识

Ajax的全称是 Asynchronous JavaScript And XML,即异步JavaScript和XML。2005年由Jesse James Garrett首先提出。在之后极短的时间内,Ajax被广泛应用到大量B/S结构的应用中,改进了传统的W...

LSantorini
2016/01/26
30
0
ajax-Ajax试题

ylbtech-doc:ajax-Ajax试题 Ajax 1.A,Ajax试题返回顶部 001.{Ajax题目}使用Ajax可带来便捷有()(选择3项) A)减轻服务器的负担 B)无刷新更新页面 C)可以调用外部数据 D)可以不使用Javas...

吞吞吐吐的
2017/10/11
0
0
ajax jsonp其本质 用原生js来处理跨域的数据(jsonp)

说明总结: 1.ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。 2.但是ajax和jsonp在...

BearCatYN
2015/06/04
0
0
【Ajax】Ajax总结

一、什么是Ajax: 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax(AsynchronousJavaScript and XML)。不用刷新整个页面便可与服务器通讯的办法。比如:高德地图就是不用刷新...

j15533415886
2017/12/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Vue重要知识小结

vue sync修饰 (1)双向数据绑定,父子组件之间信息的交互 1⃣️在自组件中使用this.emmit('toFather'),子组件产生一个tofather事件,然后在父组件中通过@进行监听,那么可以实现通信过程 2⃣...

peakedness丶
45分钟前
1
0
1024我们的码农节-向自己致敬!

一、blog主有话要说 作为(真正)入赘程序届的第一年, 对明天的1024码农节有很多话想说.比如: 给各位辛苦大佬们讲几个咱们程序届段子 给自己立一个flag, 明年的1024争取少掉点甚至不掉头发! ...

Ala6
48分钟前
15
0
solr使用规范

0. 目的 规范solr设计、用法,避免bug,提高性能 1. 设计规范 solr的用途是查询,不是存储,建议查询结果尽量都为id主键,而后再拿该id主键到缓存或者db中再查询相关信息,例如:请勿将经销商...

andersChow
今天
1
0
11-《深度拆解JVM》之Java对象的内存布局

一、问题引入 在 Java 程序中,我们拥有多种新建对象的方式。除了最为常见的 new 语句之外,我们还可以通过反射机制、Object.clone 方法、反序列化以及 Unsafe.allocateInstance 方法来新建对...

飞鱼说编程
今天
1
0
Windows Install Docker

win7、win8 win7、win8 等需要利用 docker toolbox 来安装,国内可以使用阿里云的镜像来下载,下载地址:http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ docker toolbox...

linuxprobe16
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部