前端之家收集整理的这篇文章主要介绍了
基础ajax应用,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
- function createXMLHttpRequest(){
- var xhr = null;
- try{
- xhr = new XMLHttpRequest();
- }catch(e){
- var MSXML =
- ['abc','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
-
- //IE7.0以下的 浏览器以ActiveX组件的方式来创建
- for ( var i = 0; i < MSXML.length; i++) {
- try {
- xhr = new ActiveXObject(MSXML[i]);
- break;
- } catch(ex){
- }
- }
- }
- return xhr;
- }
-
- function ajaxGet(){
-
- //1.创建XMLHttpRequest对象
- var xhr = createXMLHttpRequest();
-
- //2.创建一个新的http请求,但是没有发送该请求,并指定此请求的方法和url
- /**
- * 参数一:http方法例如POST、GET、PUT及DELETE
- * 参数二:请求的URL地址,可以为绝对地址也可以为相对地址,但是必须是本域路径
- * 参数三:指定此请求是否为异步方式,默认为true.一般都为true
- */
- xhr.open("GET","/AjaxServlet?username=admin&__task="+new Date().getTime(),true);
-
- //指定当readyState属性改变时的事件处理函数
- /**
- * 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
- 1 (初始化) 对象已建立,已经调用open方法,尚未调用send方法
- 2 (发送数据) send方法已调用,但是当前的状态及http头未知
- 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseText获取部分数据会出现错误
- 4 (完成) 数据接收完毕,此时可以通过通过responseText获取完整的回应数据
- */
- xhr.onreadystatechange = function(){
- //数据接收完毕
- if(xhr.readyState==4 && (xhr.status==200||xhr.status==304)){
- var result = xhr.responseText;
- document.getElementById("msg").innerHTML = result;
- }
- };
-
- //3.发送请求到http服务器并接收回应
- /**
- * 参数一:只对post有效
- */
- xhr.send(null);
- }
-
-
-
-
- function ajaxPost(){
- //创建ajax对象
- var xhr = createXMLHttpRequest();
-
- //创建http请求
- xhr.open("POST","/AjaxServlet"/*,true*/);
-
- //如果用 POST 请求向服务器发送数据,需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合URL编码了。
- xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
-
- xhr.onreadystatechange = function(){
- if(xhr.readyState==4 && xhr.status==200){
- var result = xhr.responseText;
- if(result=="true"){
- location.href="index.html";
- }else{
- alert("登录失败");
- }
- }
- };
- //参数格式为url方式 http://localhost/AjaxServlet?userName=admin&password=123456
- xhr.send("userName=adminx&password=123456");
- }