马克java社区,马克吐温社区,Ajax当中给出一个helloWorld例子,javascript,AJAX,XMLHttpRequest,onreadystatechange,ajax servlet,ajax helloWorld,ajax,马克-to-win,青少年Java,教程,入门,零基础,小白,菜鸟,初学者,自学者

Ajax当中给出一个helloWorld例子

1.helloWorld
马克- to-win：马克 java社区：防盗版实名手机尾号： 73203。
例 1.1（testIEFF.htm）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>helloworld</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
    if(window.ActiveXObject){//ie
        alert("we are using microsoft ActiveXObject");
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }
}

function startRequest(){

    createXMLHttpRequest();
/*
马克-to-win：onreadystatechange: 指定当readyState属性改变时的事件处理句柄

每当XMLHttpRequest状态改变时，onreadystatechange事件就触发，
actually, the next statement won't be immidiately executed, it just determine that when the status
changes, it will run handleStateChange.
*/
    xmlHttp.onreadystatechange = handleStateChange;
/* open()的第一个参数是HTTP请求方式 GET, POST, HEAD 或任何服务器所支持的您想调用的方式.
马克-to-win： it will go to the same webmodule to get "servlet", or
you can xmlHttp.open('GET', 'http://www.example.org/some.file', true);
第二个参数是请求页面的URL. 第三个参数设置请求是否为异步模式.如果是TRUE, JavaScript函数将继续执行,而不等待服务器响应.
这就是"AJAX"中的"A".
*/
/*下面两句都可以工作，但1.txt处理不了中文，下面参数q不能为中文    */
    xmlHttp.open("GET","servlet11?q=mark",true);
// xmlHttp.open("GET","1.txt",true);
/*如果第一个参数是"POST",send()方法的参数可以是任何想送给服务器的数据. 这时数据要以字符串的形式
送给服务器,如下所示: name=value&anothername=othervalue&so=on
*/
    xmlHttp.send(null);
}
function handleStateChange(){
/*
马克-to-win：readyState：返回XMLHTTP请求的当前状态
变量，此属性只读，状态用长度为4的整型表示.定义如下：

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通responseText获取完整的回应数据
*/
    if(xmlHttp.readyState == 4){
/*
status: 长整形标准http状态码，此属性仅当数据发送并接收完毕后才可获取。定义如下： Number Description
500 Internal Server Error
200 OK
404 Not Found
504 Gateway Timeout
*/
        if(xmlHttp.status == 200){//成功得到请求内容
            var tex=xmlHttp.responseText;
            alert(tex);
            document.getElementById("results").innerHTML = tex;
        }
    }
}
</script>
</head>
<body>
<form>
    <input type="button" value="Start info Request" onClick="startRequest();" />
</form>
<hr>
以下是请求内容：
<div id="results"></div>
</body>
</html>

servlet11.java

package helloWorld;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

public class servlet11 extends HttpServlet {
    private static final String CONTENT_TYPE = "text/html; charset=GBK";

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              response.setContentType(CONTENT_TYPE);
        String s=null;
        PrintWriter out = response.getWriter();
   if(request.getParameter("q")!=null)
       {
           s=request.getParameter("q");
       }
        out.println("<p>这是马克-to-win 的一个测试用例，中文能回显<br>，因为xmlHttp用的是xmlHttp.responseText<br>"
                    +s+"接受信息，所以response.setContentType(\"text/html; charset=GBK\");"+"\nbcd\ncde"
                    );

        out.close();
    }
}

例 1.2（test1IEFF.htm）

1.txt
this is a test, can not be chinese,only can be pure data
例 1.2（test3_5XMLFF&IE.htm）

<html>
<body>
    <table width="95%" border="4" align="center">
        <tr>
            <td>标题</td>
            <td>作者</td>
        </tr>
        <tbody id="display">
        </tbody>
    </table>
</body>
</html>
<script type="text/javascript">
    function makeRequest(url) {
        if (window.ActiveXObject) {
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            http_request = new XMLHttpRequest();
        }
        http_request.onreadystatechange = alertContents;
        http_request.open('GET', url, true);
        http_request.send(null);
    }
    function alertContents() {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                var xmldoc = http_request.responseXML;
*注意下面这句话中是区分大小写的*/
                var root_node = xmldoc.getElementsByTagName('BOOKS').item(0);
                var root = xmldoc.documentElement;
                alert("root.tagName is "+root.tagName+"root_node.tagName is "+root_node.tagName);

                var tChil=root.children;
                alert(tChil.length+"tChil[1].tagName is "+tChil[1].tagName);
                var tChilChil=tChil[1].children;
                alert(tChilChil[1].firstChild.nodeValue);
                var aContent = xmldoc.getElementsByTagName("COMPUTERBOOK");
                for ( var i = 0; i < aContent.length; i++) {
/*马克-to-win：既然没有getSingleElementByTagName,我们就用getElementsByTagName()[0],
xmldoc.getElementsByTagName("TITLE")[0].firstChild.nodeValue
这种方法虽然略显得笨拙，但是他能够达到兼容的效果。
*/
                    var data = [ xmldoc.getElementsByTagName("TITLE")[i].firstChild.nodeValue,xmldoc.getElementsByTagName("ARTIST")[i].firstChild.nodeValue];
                    var newRow = createRow(data);
                    var displayTable = document.getElementById("display");
                    displayTable.appendChild(newRow)
                }

            } else {
                alert('There was a problem with the request.');
            }
        }

    }

    root = makeRequest("book.xml");

    function createRow(data) {
        var row, cell, txtNode;
        row = document.createElement("tr");
        for ( var i = 0; i < data.length; i++) {
            cell = document.createElement("td");
/*the following two statements's function is the same as the third statement. we can use either way to achieve goal.*/
            //    txtNode = document.createTextNode(data[i]);
            //    cell.appendChild(txtNode);
            cell.innerHTML = data[i];
            row.appendChild(cell);
        }
        return row;
    }
</script>

book.xml

<?xml version="1.0" ?>
<BOOKS>
    <COMPUTERBOOK>
        <TITLE>java</TITLE>
        <ARTIST>马克-to-win：</ARTIST>
    </COMPUTERBOOK>
    <COMPUTERBOOK>
        <TITLE>javascript</TITLE>
        <ARTIST>马克-to-win：开</ARTIST>
    </COMPUTERBOOK>
</BOOKS>

js AJAX

js jquery