文档章节

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
南京
程序员
[Ajax-相濡以沫,不如相忘于江湖] Ajax初识

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

LSantorini
2016/01/26
30
0
Java——Ajax+Tomcat完成异步请求

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

邵鸿鑫
2015/10/30
0
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
php+ajax长轮询实现web即时聊天

web im的实现方式有很多种: 1.普通轮询,原理通过js定时重复发送ajax请求服务端,获取数据后显示。 2. 长轮询,ajax请求服务端,服务端有数据会立即返回。服务端无数据时会一直等待,直到有...

hgditren
2017/01/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

C++ gflags

###定义参数 gflags主要支持的参数类型包括bool,int32, int64, uint64, double, string等,定义参数通过DEFINE_type宏实现, 该宏的三个参数含义分别为命令行参数名,参数默认值,以及参数的...

SibylY
17分钟前
0
0
intellij IDEA Properties中文unicode转码问题

在IDEA中创建了properties文件,发现默认中文不会自动进行unicode转码。如下 在project settings - File Encoding,在标红的选项上打上勾,确定即可 效果图如下: unicode转码后效果...

muzi1994
18分钟前
0
0
Java IO类库之PipedWriter

一、PipedWriter介绍 PipedWriter是字符管道输出流,继承自Writer,功能与PipedOutputStream类似,通过与PipedReader组合使用实现类似管道的功能,在多线程环境下,一个线程使用PipedWriter...

老韭菜
22分钟前
0
0
精简分页组件(手写)

需要引入CSS(没错就是这4行) .pagelist { text-align: center; color: #666; width: 100%; clear: both; margin: 20px 0; padding-top: 20px }.pagelist a { color: #666; margin: 0 2px;......

AK灬
23分钟前
3
0
29 岁成为阿里巴巴 P8,工作前 5 年完成晋升 3 连跳,他如何做到?

泡泡是我的好朋友。今年 31 岁,毕业后就进了阿里巴巴,工作五年内从 P4 晋升至 P6、P7、P8。 和他很少聊到工作,但总觉得他有很棒的职场心得,应该分享出来,于是有了这次采访。希望对职场新...

Java填坑之路
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部