javascript 之xmlHttpRequest对象_ajax

来源：互联网发布：在淘宝购物的具体步骤编辑：程序博客网时间：2024/05/20 21:42
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>"><!--ajax = asynchronous javascript and xml;ajax 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新,这意味着在不重载整个页面的情况下,对网页的一部分进行更新;ajax 技术的核心就是 xmlHttpRequest,对于IE 来说,因为其内核与其它浏览器不一样,所有要首先判断下使用的浏览器是否是IE 浏览器if (window.ActiveXObject) // IE 浏览器  xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");else if (window.XMLHttpRequest) // 非 IE 内核浏览器  xmlHttpRequest = new XMLHttpRequest();响应过来的既可以是xml文本，还可以是json数据或者是普通文本<link rel="stylesheet" type="text/css" href="styles.css">-->    <script type="text/javascript">    var xmlHttpRequest = null;          function ajaxCallBack()    {        if(xmlHttpRequest.readyState == 4)        {            if(xmlHttpRequest.status == 200)            {                var content = xmlHttpRequest.responseText;                document.getElementById("div1").innerHTML = content;            }        }    }            function ajaxRequest ()      {        if (window.ActiveXObject)        {            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");        }        else if (window.XMLHttpRequest)        {            xmlHttpRequest = new XMLHttpRequest();        }                if (null != xmlHttpRequest)        {            var v1 = document.getElementById("value1").value;            var v2 = document.getElementById("value2").value;                        // 向服务器发送请求 post Or get            // xmlHttpRequest.open("GET", "ajaxServlet?v1="+v1, true);                        // 使用 ＰＯＳＴ 方式发请求            xmlHttpRequest.open("POST", "ajaxServlet", true);                        // 当发生状态变化时就调用这个回调函数            xmlHttpRequest.onreadystatechange = ajaxCallBack;                        // 使用post提交时必须加上下面这行代码            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");                        // 向服务器发出一个请求            xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);         }      }         // 原始 ajax 代码封装    function ajax(url, fnSucc, fnFaild)    {       // 1.创建对象    var oAjax = null;    if(window.XMLHttpRequest)    {        oAjax = new XMLHttpRequest();    }    else    {           oAjax = new ActiveXObject("Microsoft.XMLHTTP");    }          //2.连接服务器    oAjax.open('GET', url, false);   // open(方法, url, 是否异步)         //3.发送请求      oAjax.send();          //4.接收返回    oAjax.onreadystatechange = function() {  // OnReadyStateChange事件        alert(oAjax.readyState);        if (oAjax.readyState == 4)         {  //4为完成            if(oAjax.status == 200)             {    // 200为成功>> [乱码解决方案]     // http://www.cnblogs.com/beniao/archive/2008/03/29/1128914.html                 // http://www.cnblogs.com/dongritengfei/archive/2009/12/21/1628489.html                fnSucc(oAjax.responseText)             }            else            {                  if(fnFaild)                 {                    fnFaild();                }            }        }    };}    </script>  </head>    <body>     点击按钮的时候，读取abc.txt     <input id="btn" type="button" value="读取" "/><br/>     <div id="con"></div>   <script type="text/javascript"> window.onload = function() {    var oBtn = document.getElementById('btn');    var oCon = document.getElementById('con');    oBtn.onclick = function()    {        ajax('AjaxReq', function(str) {            oCon.innerHTML = str;        });    }     } </script>  </body></html>// 1 返回jsp[jsp 格式数据]$.ajax({url:"warn!getWarnInstByWarnId.action?flag=getWarnInstByWarnId",type:'POST',data:{"warnInstPO.warnId":warnId},         success:function(data) { // 将返回的jsp 放入DIV 中$("#warnInst").html(data);}});// 2 返回json [json 格式数据]$.ajax({url: "/iap/warn!getWarnInstDimType.action",   type:"post",          dataType:"json",   success: function(json) {    $.each(json,function(i){   var tempHTML1= " <option   value="+ json[i].ID  + ">"+json[i].NAME ;        $('#addWarnInst_objId').append(tempHTML1);}); }});
0 0