您的位置：首页 > 其它

封装好的Ajax调用函数以及基本方法总结

2015-04-12 10:09 453 查看
学了Ajax，今天来一个总结

首先什么是Ajax：Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。直白的说就是实现局部刷新：提升用户的体验。（jsp：同步方案（顺序流执行的））

在Ajax中，有几个技术要结合用：

静态部分：HTML，CSS，用于美化外观。

JavaScript：JavaScript可以操作DOM（文档对象模型）。

xml/json：数据交换。

XMLHTTPRequest对象：这是Ajax核心，用于异步的访问服务器

现在来在一个JS文件中创建并且封装好一个Ajax基本创建函数。

[code]    var xmlHttp;
    //创建了一个xmlhttprequest对象
    function createXMLHttpRequest() {
        if (window.XMLHttpRequest) { // 如果可以取得XMLHttpRequest
        xmlHttp = new XMLHttpRequest();  // Mozilla、Firefox、Safari 
        }else if (window.ActiveXObject) { // 如果可以取得ActiveXObject
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
        }
    }

    //对外提供的请求方法
    function startRequest(urlString,handleStateChange) {
        createXMLHttpRequest(); // 创建非同步请求
        xmlHttp.onreadystatechange = handleStateChange;  // 创建状态改变调用的函数
        xmlHttp.open("GET", urlString);  // 开启连接，注意，此处为GET请求，参数是明文显示在后面的，所有下面的请求为空
        xmlHttp.send(null);  // 传送请求
    }

    function startRequestByPost(url,queryString,handleStateChange) {
        createXMLHttpRequest(); // 创建非同步请求
        xmlHttp.onreadystatechange = handleStateChange;  // 创建状态改变调用的函数
        xmlHttp.open("POST", url); //post请求，参数不能通过地址栏传递，所有需要调用xmlHttp.send 传递参数
        //application/x-www-form-urlencoded 将请求的参数放到http请求的实体部分，而不放在地址栏上
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttp.send(queryString); 
    }

    //界面取id元素的值
    function $(elementId){
        return document.getElementById(elementId);
    }


这里要注意：

get：明文显示在地址栏（长度512字节）

post：地址栏不现实，以http协议的实体方式来传输数据，理论上没有长度限制

下面创建一个分别调用他们的页面，查看效果：

[code]<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
  <script type="text/javascript" src="js/common.js"></script></head>

  <body>
    <a href="javascript:void" onclick="startRequest('hello.jsp?name=I am get',handleStateChange)">发出get请求</a>
      <a href="javascript:void" onclick="startRequestByPost('hello.jsp','name=I am post',handleStateChange)">发出post请求</a>

  </body>
</html>

<script>
    //异步处理函数：当服务器给客户端响应时，会自动调用这个函数处理
    function handleStateChange(){
        //首先要判断状态
        //服务器的就绪状态
        if (xmlHttp.readyState == 4) { // 测试状态是否请求完成
            if (xmlHttp.status == 200) { // 如果服务器回应OK
            alert("服务器的相应" + xmlHttp.responseText);  // 这边取到回应的文字
            }
        }
    }
</script>


这里要注意一个重要的参数是xmlHttp.responseText 可以取到回应的信息。

效果



首先是get

调用的是startRequest(urlString,handleStateChange)，要传入的参数是：提交的地址？=参数名和参数，状态改变的JavaScript函数。




然后是post

调用的是startRequestByPost(url,queryString,handleStateChange)，要传入的参数是：提交的地址，参数名和函数，状态改变的JavaScript函数。区别就是参数是否跟在地址后面。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航