Ajax-01-原始使用

最新推荐文章于 2024-05-03 14:31:55 发布

Tea_wang

最新推荐文章于 2024-05-03 14:31:55 发布

阅读量215

点赞数

分类专栏： Ajax 文章标签： ajax 异步

本文链接：https://blog.csdn.net/u012167213/article/details/53033589

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.Ajax简介
2.Ajax好处
3.Ajax技术

1.Ajax简介

Asynchronous JavaScript and XML（后来不用xml，用JSON）
异步Javascript和XML
Ajax是属于客户端和服务端交互的一项技术

原有交互模式：
浏览器发送请求–>Tomcat服务器–>Tomcat将响应信息给浏览器–>JSP–>浏览器显示响应结果

Ajax交互模式：
浏览器发送请求–>XMLHttpRequest发送–>Tomcat服务器–>Tomcat返回结果–>XMLHttpRequest接收结果–>将结果显示在浏览器页面

2.Ajax好处

原有的交互模式：

整个页面刷新+请求和响应同步处理（浏览器发送请求之后，只有等到响应回来之后，才可以发送请求）

Ajax交互模式：

可以局部刷新+异步处理
提高了程序的交互效率（传递数据量少）
提升用户体验（避免了整个页面频繁刷新）

3.Ajax技术

Ajax技术是一系列技术的综合运用

基于JS发送请求和响应处理
以XMLHttpRequest对象为核心
涉及HTML，CSS页面渲染技术

方法：
open(“get|post”,”“)
send(数据);//null|key=value
onreadystatechange :事件：readState属性改变时触发注册事件

属性：
readyState:请求的状态0,1,2,3,4
status：HTTP响应CODE（200：成功；404：找不到文件；500：程序异常）
responseText：获取服务器返回文本信息
responseXML:获取服务器返回的XML信息

步骤：
1.创建XMLHttpRequest
2.发送HTTP请求
3.注册一个回调函数，请求处理时自动调用

<%@ page language="java" pageEncoding="UTF-8"%>

<html>
  <head>
    <script type="text/javascript">
        //创建XMLHttpRequest
        function getXhr(){
            var xhr;
            if(window.XMLHttpRequest){//如果支持该类型
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;//需要返回xhr
        }
        //发送HTTP请求
        function sendRequest(){
            var xhr = getXhr();//获取XMLHttpRequest
            xhr.open("get","demo1.do",true);//创建一个HTTP请求
            //注册一个回调函数,请求处理时自动调用
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){//4表示请求处理完毕
                    //获取服务器返回的信息
                    var msg = xhr.responseText;
                    //将消息放到id=msg的span显示
                    document.getElementById("msg").innerHTML=msg;
                }
            };
            xhr.send(null);//发送HTTP请求
        };
    </script>

    <script type="text/javascript">
        //检查用户名属否可用
        function checkname(){
            //获取请求参数
            var name = document.getElementById("username").value;
            //发送ajax请求
            var xhr = getXhr();//获取XMLHttpRequest
            xhr.open("post","/ajax01/check.do");//创建请求
            xhr.setRequestHeader(
                "content-type",
                "application/x-www-form-urlencoded");//给HTTP协议设置请求头参数
            //注册回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status==200){
                    var msg = xhr.responseText;
                    document.getElementById("username_msg").innerHTML = msg;
                }
            };
            xhr.send("name="+name);//发送请求
        }
    </script>
  </head>

  <body>
    <!-- 验证是否创建成功 -->
    <a href="#" onclick="sendRequest()">查看上证指数</a>
    <span id="msg"></span>
    <hr>
    <table>
      <tr>
        <td>新闻标题</td>
        <td>时间</td>
      </tr>
      <tr>
        <td>王琦与范冰冰的故事</td>
        <td>2016.11.11</td>
      </tr>
      <tr>
        <td>王琦与baby的故事</td>
        <td>2015.11.11</td>
      </tr>
      <tr>
        <td>范冰冰与baby争王琦</td>
        <td>2014.11.11</td>
      </tr>
    </table>
    <hr/>
    <input type="text" id="username" onblur="checkname()"/>
    <span id="username_msg"></span>

  </body>
</html>

Tea_wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax-01-原始使用

1.Ajax简介 2.Ajax好处 3.Ajax技术1.Ajax简介Asynchronous JavaScript and XML（后来不用xml，用JSON）异步Javascript和XML Ajax是属于客户端和服务端交互的一项技术原有交互模式：浏览器发送请求–>Tomcat服务器–>Tomcat将响应信息给浏览器–>JSP–>浏览器显示响应结果Ajax交互模式：浏览器
复制链接

扫一扫