当前位置：首页 > 编程语言 > ajax

ajax

2021-03-31 07:26

阅读：562

标签：stat   async   开发技术   object   使用   现在   Servle   esc   成功   

概念

ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术。

作用

实现在当前结果页中显示其他请求的响应内容

ajax的状态码(readyState)

0 表示XMLHttpRequest已建立，但还未初始化，这时尚未调用open方法
1 表示open方法已经调用，但未调用send方法（已创建，未发送）
2 表示send方法已经调用，其他数据未知
3 表示请求已经成功发送，正在接受数据
4 表示数据已经成功接收。

响应状态码(status)

200：请求成功
404：请求资源未找到
500：内部服务器错误

使用

ajax的基本流程

1）创建ajax引擎对象
2）复写onreadystatement函数
3）判断ajax状态码
4）判断响应状态码
5）获取响应内容(响应内容的格式)
　　普通字符串：responseText
　　json(重点)：responseText
　　　　其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法
　　　　将接收的字符串数据直接转换为js的对象
　　　　json格式：
　　　　　　var 对象名={
　　　　　　　　属性名:属性值,
　　　　　　　　属性名:属性值,
　　　　　　　　……
　　　　　　}
　　XML数据：responseXML.返回document对象
　　　　通过document对象将数据从xml中获取出来
6）处理响应内容(js操作文档结构)
7）发送请求
　　get请求
　　　　get的请求实体拼接在URL后面，？隔开，键值对
　　　　ajax.open("get","url");
　　　　ajax.send(null);
　　post请求
　　　　有单独的请求实体
　　　　ajax.open("post", "url");
　　　　ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
　　　　ajax.send("name=张三&pwd=123");

@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8">
title>Insert title heretitle>

script type="text/javascript">
    function getData(){        
        //创建ajax引擎对象
            var ajax;
            if(window.XMLHttpRequest){//火狐
                ajax=new XMLHttpRequest();
            }else if(window.ActiveXObject){//IE
                ajax=new ActiveXObject("Msxml2.XMLHTTP");
            }
        
            //复写onreadystatement函数
            ajax.onreadystatechange=function(){
                //判断Ajax状态吗
                if(ajax.readyState==4){
                    //判断响应状态吗
                    if(ajax.status==200){
                        //获取响应内容
                        var result=ajax.responseText;
                        //处理响应内容
                            //获取元素对象
                            var showdiv=document.getElementById("showdiv");
                            showdiv.innerHTML=result;
                    }else if(ajax.status==404){
                        //获取元素对象
                        var showdiv=document.getElementById("showdiv");
                        showdiv.innerHTML="请求资源不存在";
                    }else if(ajax.status==500){
                        //获取元素对象
                        var showdiv=document.getElementById("showdiv");
                        showdiv.innerHTML="服务器繁忙";
                    }
                }else{
                    //获取元素对象
                    var showdiv=document.getElementById("showdiv");
                    showdiv.innerHTML="";
                }
            }
        //发送请求
        //get方式:请求实体拼接在URL后面
            ajax.open("get","ajax?"+data);
            ajax.send(null);
        //post方式：请求实体需要单独的发送
            ajax.open("post", "ajax");
            ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            ajax.send("name=张三&pwd=123");
    }
script>
style type="text/css">
    #showdiv{
        border:solid 1px;
        width:200px;
        height:100px; 
    }
style>
head>
body>
    h3>欢迎登录403峡谷h3>
    hr>
    input type="button" value="测试 " onclick="getData()"/>
    div id="showdiv">div>
body>
html>

 ajax的异步和同步

ajax.open(method,urL,async)
　　async：设置同步代码执行还是异步代码执行
　　true代表异步，默认是异步
　　false代表同步

例：ajax.open("get","ajax",true);

json格式获取响应内容

responseText
其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法
将接收的字符串数据直接转换为js的对象
json格式：
　　var 对象名={
　　　　属性名:属性值,
　　　　属性名:属性值,
　　　　……
　　}

@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8">
title>Insert title heretitle>

 
 script type="text/javascript" src="js/ajaxUtil.js">script>
 script type="text/javascript">
     //获取数据
         function getData(){
             //获取用户请求信息
             var name=document.getElementById("uname").value;
             //创建ajax引擎对象
                 var ajax;
                 if(window.XMLHttpRequest){
                     ajax=new XMLHttpRequest();
                 }else if(window.ActiveXObject){
                     ajax=new ActiveXObject("Msxml2.XMLHTTP");
                 }
             //复写onreadystatechange
             ajax.onreadystatechange=function(){
                 //判断ajax状态码
                 if(ajax.readyState==4){
                     //判断响应状态码
                     if(ajax.status==200){
                         //获取响应数据
                            var result=ajax.responseText;
                            //eval("var obj="+result);
                            //alert(obj.name);
                            eval("var u="+result);
                            alert(result);
                         //处理响应数据
                             //获取table表格对象
                             var ta=document.getElementById("ta");
                             ta.innerHTML="";
                             var tr=ta.insertRow(0);
                             var cell0=tr.insertCell(0);
                             cell0.innerHTML="编号";
                             var cell1=tr.insertCell(1);
                             cell1.innerHTML="名称";
                             var cell2=tr.insertCell(2);
                             cell2.innerHTML="价格";
                             var cell3=tr.insertCell(3);
                             cell3.innerHTML="位置";
                             var cell4=tr.insertCell(4);
                             cell4.innerHTML="描述";
                             //插入新的行
                             var tr=ta.insertRow(1);
                             var cell0=tr.insertCell(0);
                             cell0.innerHTML=u.uid;
                             var cell1=tr.insertCell(1);
                             cell1.innerHTML=u.uname;
                             var cell2=tr.insertCell(2);
                             cell2.innerHTML=u.price;
                             var cell3=tr.insertCell(3);
                             cell3.innerHTML=u.loc;
                             var cell4=tr.insertCell(4);
                             cell4.innerHTML=u.desc;
                     }
                 }
             }
             //发送请求
             ajax.open("get","user?name="+name);
             ajax.send(null);
         }    
 script>
head>
body>
    h3>欢迎访问英雄商店h3>
    hr>
    英雄名称：input type="text" name="uname" value="" id="uname"/>
           input type="button" value="搜索" onclick="getData2()">
    hr>
    table border="1px" id="ta">
    table>
body>
html>

在UserServlet中：

 1 public class UserServlet extends HttpServlet{
 2     @Override
 3     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 4         //设置请求编码格式
 5         req.setCharacterEncoding("utf-8");
 6         //设置响应编码格式
 7         resp.setCharacterEncoding("utf-8");
 8         resp.setContentType("text/xml;charset=utf-8");
 9         //获取请求信息
10         String name=req.getParameter("name");
11         System.out.println("用户请求信息为："+name);
12         //处理请求信息
13             //获取业务层对象
14             UserSrevice us=new UserSeviceImp();
15             //处理业务
16             User u=us.getUserInfoService(name);
17             System.out.println("查询结果为:"+u);
18         //响应处理结果
19             //resp.getWriter().write("{name:‘"+u.getUname()+"‘,pwd:‘"+u.getPwd()+"‘}");
20             resp.getWriter().write(new Gson().toJson(u));
21     }
22 }

在servlet中响应结果返回中：
resp.getWriter().write("{name:‘"+u.getUname()+"‘,pwd:‘"+u.getPwd()+"‘}");
此方式拼接字符串太麻烦，推荐安装jar包：gson-2.2.4.jar
resp.getWriter().write(new Gson().toJson(u));

XML数据格式获取响应内容

responseXML：返回document对象
　　通过document对象将数据从xml中获取出来

%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8">
script type="text/javascript">
    function getXML(){
        //创建ajax引擎对象
            var ajax;
            if(window.XMLHttpRequest){//火狐
                ajax=new XMLHttpRequest();
            }else if(window.ActiveXObject){//ie
                ajax=new ActiveXObject("Msxml2.XMLHTTP");
            }
        //复写onreadystatechange
            ajax.onreadystatechange=function(){
                //判断Ajax状态吗
                if(ajax.readyState==4){
                    //判断响应状态吗
                    if(ajax.status==200){
                        //获取响应内容
                        var doc=ajax.responseXML;
                        //处理响应内容
                            //获取元素对象
                            alert(doc.getElementsByTagName("name")[0].innerHTML);
                    }
                }
            }
        //发送请求
            ajax.open("get","xml.jsp",true);
            ajax.send(null);
    }
script>
head>
body>
    h3>XML数据格式学习h3>
    hr>
    input type="button" value="测试XML" onclick="getXML()" />
body>
html>

在xml.jsp中：

%@ page language="java" contentType="text/xml; charset=utf-8"%>
user>
    name>李四name>
    pwd>123pwd>
user>

相当于在Servlet中响应xml格式信息：
　　//响应处理结果
　　resp.getWriter().write("1张三11.11");

 

ajax

标签：stat   async   开发技术   object   使用   现在   Servle   esc   成功   

原文地址：https://www.cnblogs.com/sunny-sml/p/12587790.html

上一篇：vue-hbuilder打包-调取摄像头或上传图片

下一篇：JSP 04课 (1)

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：ajax
文章链接：http://soscw.com/index.php/essay/70360.html

评论

亲，登录后才可以留言！

热门文章

推荐文章

最新文章

置顶文章

关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |
搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。
特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：点击这里给我发消息
Copyright © 2024 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1