精华内容
下载资源
问答
  • javascript js原生ajax post请求 实例
    千次阅读
    2018-05-30 10:56:00

    HTML代码:

    注意:

     xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");  //用POST的时候一定要有这句
    <!DOCTYPE HTML>
    <html>
    <head>
    	<meta http-equiv="content-type" content="text/html" />
    	<meta name="author" content=" " />
    
    	<title>无标题 1</title>
    </head>
    
    <body>
    
    <button οnclick="ajaxp()" name="ajax" value="AJax">AJAX</button>
    
    </body>
    </html>
    <script>
    var xmlhttp;
    function ajaxp(){
     var str = "id=123";
    send(str);
    
    function send(arg) {
      CreateXMLHttpRequest();
      xmlhttp.onreadystatechange = callhandle;
      //xmlhttp.open("GET","Default.aspx?goback=yes&arg=" + arg,true);
      xmlhttp.open("POST", "ajax.php", true);
      xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");  //用POST的时候一定要有这句
      xmlhttp.send(arg);
    
    }
    
    function CreateXMLHttpRequest() {
      if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      else if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      }
    }
    
    function callhandle() {
      if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
          alert(xmlhttp.responseText);
        }
      }
    }
    /
    }</script>
    

     PHP文件:

    <?php
    echo "i am a ajax data.". $_POST['id'];

    ?>

    转载于:https://www.cnblogs.com/xtmp/p/9109717.html

    更多相关内容
  • javascript/jsajax的GET请求: [removed] /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){  if (window.XMLHttpRequest){  // code for IE7+, Firefox, Chrome, Opera, Safari  ...
  • 主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送null 第五步:在监听函数...
  • js封装原生ajax

    2019-04-04 15:02:37
    js封装原生ajax,XMLHttpRequest/ActiveXObject对象封装
  • ajax:一种请求数据的方式,不需要刷新整个页面; ajax的技术核心是 XMLHttpRequest 对象; ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据; /** * 得到ajax对象 */ function ...
  • JavaScript原生实现Ajax

    2021-10-11 10:12:09
    Ajax处理从一个对象开始,通过该对象进行通信。我们将这个对象称为“Ajax对象”,或者称为“XHR对象”,XHR是XML HTTP请求(XML HTTP Request)的缩写。 实现步骤: 一. 创建Ajax对象 每个浏览器都定义了一个具备必要...

    Ajax处理从一个对象开始,通过该对象进行通信。我们将这个对象称为“Ajax对象”,或者称为“XHR对象”,XHR是XML HTTP请求(XML HTTP Request)的缩写。

    实现步骤:

    一. 创建Ajax对象

    每个浏览器都定义了一个具备必要功能的XMLHTTPRequest对象,但是创建该对象的细节在不同浏览器中可能稍有不同。使用下面的代码可以在所有浏览器中可靠地创建一个Ajax对象:

    var ajax;
    if(window.XMLHttpRequest){
        ajax = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        //对于老款的IE浏览器
        ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');
    }
    

    注: XMLHttpRequest对象存在于所有非IE浏览器和Internet Explorer 7之后的版本。更老的IE版本必须创建新的ActiveXObject,以MSXML2.XMLHTTP.3.0作为参数

    二. 指定结果处理器

    有了Ajax对象后,下一步就是指定该对象的结果处理器。结果处理器是在Ajax事务期间调用的函数。为了将该函数与Ajax调用关联,将该函数赋予对象的onreadystatechange属性:

    ajax.onreadystatechange = handleStateChange;
    

    三. 发出请求

    创建Ajax对象并指定响应处理函数后,就可以执行实际的请求了。发出Ajax时,首先要调用对象的open方法,以请求类型作为第一个参数,服务器资源的URL为第二个参数。

    ajax.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
    //bstrMethod:String类型,http方法,例如:POST、GET、PUT及PROPFIND。大小写不敏感。
    //bstrUrl:String类型,请求的URL地址,可以为绝对地址也可以为相对地址。
    //varAsync[可选]:boolean类型,是否为异步的方式,默认为true
    //bstrUser[可选]:String类型,如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。
    //bstrPassword[可选]:String类型,验证信息中的密码部分,如果用户名为空,则此值将被忽略。
    

    最后一步时调用send()方法实际地发送请求:

    ajax.send(null);
    //现在暂时使用null值作为方法的唯一参数,这个参数代表请求中的数据
    //用GET的方法,send参数填null,将提交的信息填写在URL中
    //用POST的方法,send内可以填写参数,同时还需要设置Content-Type头信息
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
    

    请求发送但尚未完成的时候,可以调用对象的abort()方法撤销请求:

    ajax.abort();
    

    四. 处理服务器响应

    发出Ajax请求后,在对象的readyState属性变化时,将调用赋予Ajax对象onreadystatechange属性的函数。readyState属性有如下5个值,按照执行的顺序排列:

    • 0,未发送
    • 1,打开
    • 2,接收到首标
    • 3,加载中
    • 4,完成

    例如,发送请求之后,该值立刻变成1,然后变成2、3,最后变成4。

    此时,onreadystatechange属性所指的函数用于处理服务器响应,在请求过程的每个阶段,该函数都将被调用。
    在处理readyState变化的函数中,你可以检查readyState属性并相应做出反应。例如,属性值4意味着处理已经完成,页面可以使用处理的结果。其它值意味着Ajax请求仍然在处理中,脚本不需要做任何事情。

    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4){
            // 你可以处理响应了
        }else{
            // 你可以显示正在加载或者不作处理
        }
    }
    

    readyState等于4时,Ajax请求已经完成了整个周期,但是在试图处理响应之前还要进行一次检查:确认响应正常。检查对象的status属性可以完成确认工作,该属性代表服务器对资源请求的相应代码。这些服务器HTTP代码包括:

    • 200,OK(正常)
    • 301,Moved Permanently(永久性移动)
    • 304,Not Modified(未作修改)
    • 307,Temporary Redirect(临时重定向)
    • 401,Unauthorized(未授权)
    • 403,Forbidden(禁止访问)
    • 404,Not Found(未找到)
    • 500,Internal Server Error(内部服务器错误)

    我们没有必要记住或者处理各种可能性。当状态码为200时,说明资源已经找到并且可以加载。如果状态码为304,说明浏览器有一个可用的缓存版本。其他所有代码都说明出现了问题。

    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4){
            if(ajax.status >=200 && ajax.status < 300 || (ajax.status == 304)){
                // 你可以处理响应了
                console.log(ajax.responseText)
            }else{
                // 响应错误
            }
        }else{
            // 你可以显示正在加载或者不作处理
        }
    }
    

    总流程示例代码:

    JavaScript代码

    // 创建Ajax对象
    var ajax;
    if(window.XMLHttpRequest){
        ajax = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        ajax = new ActiveXObject();
    }
    if(ajax != null){
    	// 指定结果处理器
        ajax.onreadystatechange = function(){
            if(ajax.readyState == 4){
                if(ajax.status == 200 || ajax.status == 304){
                    // 输出响应信息
                    console.log(ajax.responseText);
                }
            }
        }
        // 发送请求
        ajax.open("GET","http://localhost/api.php");
        ajax.send(null);
        
    }else{
        // 浏览器不支持XMLHttpRequest
    }
    

    服务器端程序代码(PHP)

    // 允许跨域
    header('Access-Control-Allow-Origin:*');
    // 响应类型
    header('Access-Control-Allow-Methods:GET');
    // 响应头设置
    header('Access-Control-Allow-Headers:x-requested-with,content-type');
    
    echo "Success";
    

    运行后,你将会在浏览器控制台看到Success的输出结果

    展开全文
  • AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术。 动态网页:是指可以通过服务器语言结合数据库随时修改数据的网页。 静态网页,随着html代码的生成,页面的...
  • Js原生ajax与跨域(代理)上传文件:JS原生模拟ajax请求与实现ajax跨域代理上传文件和jquery跨域上传文件Dome
  • JS原生Ajax和jQuery的Ajax与代码示例

    万次阅读 多人点赞 2018-08-26 20:38:57
    JS原生Ajax和jQuery的Ajax 【学习目标】 1,了解JS原生Ajax原理 2,掌握json数据格式 掌握json数据格式方式 掌握json的解析方式 3,掌握jQuery中的Ajax封装 4,使用Ajax实现特效 实现异步验证用户名是否存在 ...

    JS原生Ajax和jQuery的Ajax

    【学习目标】

    1,了解JS原生Ajax原理

    2,掌握json数据格式

    1. 掌握json数据格式方式
    2. 掌握json的解析方式

    3,掌握jQuery中的Ajax封装

    4,使用Ajax实现特效

    1. 实现异步验证用户名是否存在
    2. 实现站内搜索功能
      1. Ajax基本概念

    1.1.1 Ajax概述

    什么是同步,什么是异步

    同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态

    异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随  意做其他事情,不会被卡死

    1.1.2 Ajax的运行原理

    页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种功能。Ajax异步请求与同步请求对比如下图所示。

    1.2 JS原生的Ajax技术(了解)

    js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原生的Ajax完成异步操作,有如下几个步骤:

    1)创建Ajax引擎对象

    2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)

    3)绑定提交地址

    4)发送请求

    5)接受响应数据

    【练习题目】:在页面中添加一个按钮,点击发送ajax请求。

    开发步骤:

    1. 创建WEB 工程
    2. 编写JSP 页面
    3. 编写Servlet代码处理异步请求
    4. 运行测试

    【第一步】创建Web工程:day08

    注意:选择servlet2.5或以上版本,编译jdk选大于5的,比如6或7的。

    【第二步】新加ajax.jsp页面,编写代码实现发送请求

    静态html代码

    <body>

           <input type="button" value="异步请求服务器" onclick="fn1()"><span id="span1"></span><br>

    </body>

    编写JS实现JS原生ajax功能

    function fn1() {

                  //发送异步请求

                  //1.创建ajax引擎对象----所有操作都是由ajax引擎完成

                  var xmlHttp = new XMLHttpRequest();

                  //2.为引擎对象绑定监听事件

                  xmlHttp.onreadystatechange = function() {

                         //当状态变化时处理的事情

                         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                                //5.接收响应信息

                                var data = xmlHttp.responseText;

                                //alert(data);

                                document.getElementById("span1").innerHTML=data;

                         }

                  }

                  //3.绑定服务器地址

                  //第一个参数:请求方式GET/POST

                  //第二个参数:后台服务器地址

                  //第三个参数:是否是异步 true--异步   false--同步

                  xmlHttp.open("GET", "${pageContext.request.contextPath}/ajaxServlet?username=zhangsan",

                                true);            

            //4.发送请求

                  xmlHttp.send();

           }

    注意:接收响应信息应该在监听事件中完成,并且只有当readyState4(即请求已处理完毕,响应已准备就绪),并且status200(正常响应)时,方可处理响应信息。

    【第三步】编写Servlet处理异步请求

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

             //获取用户名

                  String name = request.getParameter("username");

                  response.getWriter().write(Math.random()+"-" + name);

           }

    【第四步】测试

    发布项目并访问:http://localhost:8080/Day08/ajax.jsp

    点击按钮,异步请求从后台服务器返回一个随机数和传递的参数值。

    【练习扩展】对比异步与同步的区别

    异步与同步的主要区别是:同步必须等待后台响应结束,页面才可以进行其他操作,出现卡死状态。而异步请求,页面不受服务器响应影响,即使服务器未发回响应,客户端仍然可以做其他操作。为了对比两者的不同,现在页面中添加两个按钮,分别实现同步发送请求和测试点击情况。

    1.ajax.jsp页面中

    <input type="button" value="同步请求服务器" onclick="fn2()"><span id="span2"></span><br>

    <input type="button" value="测试" onclick="alert('可以点击')">

    编写fn2函数

    function fn2() {

                  //发送同步请求

                  //1.创建ajax引擎对象----所有操作都是由ajax引擎完成

                  var xmlHttp = new XMLHttpRequest();

                  //2.为引擎对象绑定监听事件

                  xmlHttp.onreadystatechange = function() {

                         //当状态变化时处理的事情

                         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                                //5.接收响应信息

                                var data = xmlHttp.responseText;

                                //alert(data);

                                document.getElementById("span2").innerHTML=data;

                         }

                  }

                  //3.绑定服务器地址

                  //第一个参数:请求方式GET/POST

                  //第二个参数:后台服务器地址

                  //第三个参数:是否是异步 true--异步   false--同步

    false-同步请求

                  xmlHttp.open("GET", "${pageContext.request.contextPath}/ajaxServlet",

                                false);

                  //4.发送请求

                  xmlHttp.send();

           }

    2.在AjaxServlet中使用线程的sleep方法,模拟服务器响应一段时间

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

                  // TODO Auto-generated method stub

                  //response.getWriter().write("zhangsan");

                  try {

    线程sleep模拟服务器执行一段时间

                         Thread.sleep(5000);

                  } catch (InterruptedException e) {

                         // TODO Auto-generated catch block

                         e.printStackTrace();

                  }

                  //获取用户名

                  String name = request.getParameter("username");

                  response.getWriter().write(Math.random()+"-" + name);

           }

    3.页面效果对比:

    点击 异步请求服务器 按钮,则在后台未响应回客户端之前仍然可以点击 测试 按钮,但点击同步请求服务器 按钮,则在后台未响应回客户端之前无法点击 测试 按钮。

    注意:在JS原生Ajax中,也可以指定 如果是post提交

    在发送请求之前设置一个头

    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    总结:

    所用异步访问都是ajax引擎

    1.3 Json数据格式(重要)

    1.3.1 json作用

    json是一种与语言无关的数据交换的格式,其主要作用:

    1)使用ajax进行前后台数据交换

    2)移动端与服务端的数据交换

    1.3.2 Json的格式与解析

    json有两种格式:

    1)对象格式:{"key1":obj,"key2":obj,"key3":obj...}

    例如:user对象 用json数据格式表示

    {"username":"zhangsan","age":28,"password":"123","addr":"北京"}

    2)数组/集合格式:[obj,obj,obj...]

    List<Product> 用json数据格式表示

    [{"pid":"10","pname":"小米4C"},{},{}]

    注意:对象格式和数组格式可以互相嵌套

    注意:json的key是字符串  json的value是Object

    json的解析:

    json是js的原生内容,也就意味着js可以直接取出json对象中的数据

    【Json练习一】使用对象格式保存Person对象

      <script language="JavaScript">

           //使用json的对象格式

           var user={"firstname":"","lastname":"三丰","age":100};

          

           //js直接可以解析

          

           alert(user.lastname+"----" +user.age);

      </script>

    【Json练习二】使用对象格式保存Person集合对象

    <script language="JavaScript">

               //json的数组/集合格式

               var users = [

                                     {"firstname":"","lastname":"三丰","age":100},

                                     {"firstname":"","lastname":"","age":25},

                                     {"firstname":"","lastname":"","age":42}

                            ];

            alert(users[1].firstname+"---"+users[2].lastname);

      </script>

    其余案例请见源码day08/WebContent/json下的json01.html-json05.html。

    1.3.3 Json的转换插件

    通常在开发过程中,服务器端经过处理的数据为对象或者集合等类型,而返回页面时又需要将数据转换成json格式。如果这个过程完全手动拼接json字符串,则大大降低开发效率。因此,出现很多json转换的插件,主要目的就是将java的对象或集合转成json形式字符串。开发人员只要知道如果调用API即可。

    常用的json转换工具有如下几种:

    jsonlib:

    Gson:google

    fastjson:阿里巴巴

    以上几种工具的具体使用步骤基本一致,分为以下几步:

    第一步:引入jar包。

    第二步:调用相应的API方法,实现将Java对象或集合转成Json字符串。具体API方法则在后面的案例中详细讲解。

    1.4 Jquery的Ajax技术(重点)

    jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但开发中经常使用的有三种

    1. $.get(url, [data], [callback], [type])
    2. $.post(url, [data], [callback], [type])

    其中:

    url:代表请求的服务器端地址

    data:代表请求服务器端的数据(可以是key=value形式也可以是json格式)

    callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)

    type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)

    常用的返回类型:text、json、html等。

    1. $.ajax( { option1:value1,option2:value2... } ); ---- 以后在掌握

    常用的option有如下:

    async:是否异步,默认是true代表异步

    data:发送到服务器的参数,建议使用json格式

    dataType:服务器端返回的数据类型,常用text和json

    success:成功响应执行的函数,对应的类型是function类型

    type:请求方式,POST/GET

    url:请求服务器端地址

    1.5 实例Demo

    1.5.1 注册时异步校验用户名是否可用

    【功能描述】:在之前的项目中,有注册模块。一般在用户注册时,在填写用户名并文本框失去光标时,应该马上知道该用户名是否可用。该功能可以使用ajax的异步请求方法实现。具体步骤如下:

    步骤一:创建WEB工程。在本案例中,为节约时间,我们使用之前的day07项目下的注册模块。

    步骤二:在regist.jsp中添加异步请求

    <script type="text/javascript">

        $(function(){

           //为文本框注册blur事件

           $("#username").blur(function(){

               //1.获取文本框中输入的内容

               var usernameValue = $("#username").val();//this.value //$(this).val()

    请求的后台地址

              

               //2.发送ajax请求

               $.post(

                  "${pageContext.request.contextPath}/checkUsername",

                  {"username":usernameValue},

                  function(data){

    解析后台返回的json数据,并根据情况给出用户提示

                      //3.解析{"isExist":true/false}

                      var isExist = data.isExist;

                      var usernameInfo="";

                      if(isExist)//用户存在 ,用户名不可以使用

                      {

                         usernameInfo="该用户名已被占用";

                         $("#usernameInfo").css("color","red");

                        

                      }else{

                         usernameInfo="该用户名可以使用";

                         $("#usernameInfo").css("color","green");

                      }

                     

                      $("#usernameInfo").html(usernameInfo);

                     

                  },

                  "json"

               )

           })

        })

    </script>

    步骤三:添加后台服务器端处理的Servlet

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

           //1.获取用户名

           String username = request.getParameter("username");

           //2.调用service方法,验证用户名是否存在

           UserService service = new UserService();

           boolean isExist = service.checkUsername(username);

           //自己手动拼接json字符串

           response.getWriter().write("{\"isExist\":"+isExist+"}");

        }

    步骤四:Service层和Dao层

    UserService.java中

    public boolean checkUsername(String username) {

           UserDao dao = new UserDao();

           Long count = 0L;

           try {

               count = dao.checkUsername(username);

           } catch (SQLException e) {

               // TODO Auto-generated catch block

               e.printStackTrace();

           }

           return count>0?true:false;

        }

    UserDao.java中

    public Long checkUsername(String username) throws SQLException {

           QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());

           String sql ="select count(*) from user where username=?";

           Long row = (Long)runner.query(sql, new ScalarHandler(), username);

           return row;

        }

    若实现以上步骤,在项目部署完毕,则注册模块即可实现实时验证用户名是否可用。

    1.5.2 实现站内搜索功能

    【功能描述】:在我们的贯穿项目中,首页有个站内搜索功能,即当在搜索栏中搜索内容时,搜索栏下方实时弹出当前商城下所有相关产品名称。实现步骤如下:

    步骤一:修改商城头部页面header.jsp,使其满足样式需要,并为搜索框添加onkeyup事件

    <form class="navbar-form navbar-right" role="search">

            <div class="form-group" style="position: relative">

                  <input id="search" type="text" class="form-control" placeholder="Search" onkeyup="searchWord(this)">

                  <div id="showDiv" style="display:none;position: absolute;z-index:1000; background-color:#fff; width:196px; border:1px solid #ccc">

                  </div>

           </div>

           <button type="submit" class="btn btn-default">Submit</button>

    </form>

    步骤二:编写事件处理函数

    function searchWord(obj)

        {

           //1.当键盘抬起时,获取输入框中的内容

        //  alert(obj.value);

           var word = $(obj).val();

           //2.ajax请求发送服务器,模糊查询关键字List<Product> List<String>

           $.post(

               "${pageContext.request.contextPath}/searchWord",//地址

               {"word":word},

               function(data){

                  if(data.length>0){

                      var content="";

                      //3.解析数据,显示到showDiv

                      for(var i=0;i<data.length;i++)

                      {

                         content+="<div style='padding:5px;cursor:pointer' οnmοuseοver='overfn(this)' οnmοuseοut='outfn(this)' οnclick='clickDiv(this)'>"+data[i]+"</div>";

                      }

                     

                      $("#showDiv").html(content);

                      $("#showDiv").css("display","block");

                  }

    返回json集合,即所有相关商品的名称的集合,通过js解析之后放入页面显示区域

               },

               "json"

           );

          

          

        }

       

        function overfn(obj)

        {

           $(obj).css("background-color","#ccc");

        }

        function outfn(obj)

        {

           $(obj).css("background-color","#fff");

        }

        function clickDiv(obj)

        {

           $("#search").val($(obj).html());

           $("#showDiv").css("display","none");

        }

    步骤三:添加服务器端处理的Servlet代码

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

           // TODO Auto-generated method stub

           //获取关键词

           String word = request.getParameter("word");

           ProductService service = new ProductService();

           List<Object> productList = service.searchWord(word);

          

           //需要将集合转成json格式的字符串

           //[{"pname":"小米","shop_price":1988,.....},{}]

           //jsonlib

           /*JSONArray array = JSONArray.fromObject(productList);

           String json = array.toString();*/

           //System.out.println(json);

          

           //Gson

           Gson gson = new Gson();

           String json = gson.toJson(productList);

           //["小米","华为","".......]

           response.setContentType("text/html;charset=UTF-8");

           response.getWriter().write(json);

        }

           在该步骤中,使用了jsonlib和Gson两种方式将java对象进行转换成json字符串,从两者对比可以看出,jsonlib方式较繁琐,而Gson工具处理则更加简洁。对于fastjson的用法,同学们可以自行学习。

    第四步骤:编写Service层和Dao层代码(此处略,详细请见源码)

    第五步骤:测试。

    1.6 总结

    本章主要讲解Web开发中常用技术之一——Ajax异步刷新技术。希望通过本文档配合视频和源码,能使所有同学掌握该技术的关键内容。

    代码示例

    js代码:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ajax</title>
    <script type="text/javascript">
    	function fn1() {
    		//获取要携带的参数
    		var uname = document.getElementById("uname").value;
    		var upass = document.getElementById("upass").value;
    		//发送异步请求
    		//1.创建ajax引擎对象----所有操作都是由ajax引擎完成
    		var xmlHttp; //ajax请求状态码0
    		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    			xmlhttp = new XMLHttpRequest();
    		} else {// code for IE6, IE5
    			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    		}
    
    		//2.为引擎对象绑定监听事件 (设置回调函数)
    		xmlhttp.onreadystatechange = function(){
    			//等待服务器响应
    			if(xmlhttp.readyState==4){
    				//当请求状态为4时,说明请求完成
    				if(xmlhttp.status==200){
    					//判断服务器响应状态吗是否正常
    					//取出响应的数据
    					var result = xmlhttp.responseText;
    					//将数据通过JS添加到页面
    					document.getElementById("result").innerHTML=result;
    				}
    			}
    		}
    		//3.绑定服务器地址
    		//第一个参数:请求方式GET/POST
    		//第二个参数:后台服务器地址
    		//第三个参数:是否是异步 true--异步   false--同步
    		xmlhttp.open("GET", "ajax?uname="+uname+"&upass="+upass, true);
    		//4.发送请求
    		xmlhttp.send();
    		//ajax请求状态码1,2,3,4
    		
    		//发送请求之后,执行JS
    		document.getElementById("r").innerHTML="这里是测试的内容";
    	}
    	
    	
    	function fn2() {
    		//获取要携带的参数
    		var uname = document.getElementById("uname").value;
    		var upass = document.getElementById("upass").value;
    		//发送异步请求
    		//1.创建ajax引擎对象----所有操作都是由ajax引擎完成
    		var xmlHttp; //ajax请求状态码0
    		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    			xmlhttp = new XMLHttpRequest();
    		} else {// code for IE6, IE5
    			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    		}
    
    		//2.为引擎对象绑定监听事件 (设置回调函数)
    		xmlhttp.onreadystatechange = function(){
    			//等待服务器响应
    			if(xmlhttp.readyState==4){
    				//当请求状态为4时,说明请求完成
    				if(xmlhttp.status==200){
    					//判断服务器响应状态吗是否正常
    					//取出响应的数据
    					var result = xmlhttp.responseText;
    					//将数据通过JS添加到页面
    					document.getElementById("result").innerHTML=result;
    				}
    			}
    		}
    		//3.绑定服务器地址
    		//第一个参数:请求方式GET/POST
    		//第二个参数:后台服务器地址
    		//第三个参数:是否是异步 true--异步   false--同步
    		xmlhttp.open("POST", "ajax", true);
    		//设置Content-type
    		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    		//4.发送请求
    		xmlhttp.send("uname="+uname+"&upass="+upass);
    		//ajax请求状态码1,2,3,4
    		
    		//发送请求之后,执行JS
    		document.getElementById("r").innerHTML="这里是测试的内容";
    	}
    </script>
    </head>
    <body>
    	<form action="ajax" method="post">
    		<input type="text" id="uname" name="uname" placeholder="请输入用户"> 
    		<input type="text" id="upass" name="upass" placeholder="请输入密码"> 
    		<input type="button" onclick="fn1()" value="提交GET" />
    		<input type="button" onclick="fn2()" value="提交POST" />
    	</form>
    	<span id="r"></span>
    	<br/>
    	<span id="result">
    	</span>
    </body>
    </html>

    后端:

    package com.igeek.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * Servlet implementation class AjaxServlet
     */
    public class AjaxServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        public AjaxServlet() {
            super();
        }
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		
    //		try {
    //			Thread.sleep(3000);
    //		} catch (InterruptedException e) {
    //			e.printStackTrace();
    //		}
    		
    		//取出请求参数
    		String name = request.getParameter("uname");
    		System.out.println(name);
    		String pass = request.getParameter("upass");
    		System.out.println(pass);
    		//响应客户端
    		//response.sendRedirect("index.jsp");
    		PrintWriter writer = response.getWriter();
    		writer.write("abc");
    		writer.close();
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		request.setCharacterEncoding("utf-8");
    		doGet(request, response);
    	}
    
    }
    

    展开全文
  • JS原生AJAX

    千次阅读 2020-08-07 15:39:02
    原生JSAJAX异步请求代码 如何输写 参考我们的W3school文档,我们可以知道怎么写https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp 结合文档,那我就自己写一个...

    AJAX各种实现方式

    JS原生AJAX 

    如何输写 

    GET异步请求

    POST异步请求


     

    AJAX各种实现方式

    JS原生AJAX 

    原生JS的AJAX异步请求代码

    如何输写 

    参考我们的W3school文档,我们可以知道怎么写https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp

     

     

    结合文档,那我就自己写一个异步请求

    GET异步请求

    例子:单击某个按钮,异步请求servlet,然后把响应内容返回给div

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>js原生异步</title>
        <style>
            input{
                width:300px;
                height: 50px;
                background-color:burlywood ;
            }
            div{
                width:300px;
                height: 100px;
                background-color: pink;
            }
        </style>
        <script>
            function myClick() {
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp=new XMLHttpRequest();
                } else {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.open("GET","demo1?name=林大帅",true);
                xmlhttp.send();
                xmlhttp.onreadystatechange=function() {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                        document.getElementById("div").innerHTML=xmlhttp.responseText;
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="单击我触发请求" onclick="myClick();" > <br><br><br>
        <div id="div">
    
        </div>
    </body>
    </html>
    

    demo1代码

    package com.lingaolu.servlet;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.*;
    import java.io.IOException;
    
    /**
     * @author 林高禄
     * @create 2020-08-07-14:58
     */
    @WebServlet("/demo1")
    public class Demo1 extends HttpServlet {
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            String name = request.getParameter("name");
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write("<h1>"+name+"</h1>");
        }
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }
    

     

    运行访问,单击按钮前

    单击按钮后,异步把内容付给了div

    POST异步请求

    POST请求和GET有些不一样,传参的方式变了,而且要设置请求头

    服务器的请求获取参数也有设置编码,不然中文会乱码 

    例子:单击某个按钮,异步请求servlet,然后把响应内容返回给div

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>js原生异步</title>
        <style>
            input{
                width:300px;
                height: 50px;
                background-color:burlywood ;
            }
            div{
                width:300px;
                height: 100px;
                background-color: pink;
            }
        </style>
        <script>
            function myClick() {
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp=new XMLHttpRequest();
                } else {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.open("POST","demo1",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send("name=林大帅");
                xmlhttp.onreadystatechange=function() {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                        document.getElementById("div").innerHTML=xmlhttp.responseText;
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="单击我触发请求" onclick="myClick();" > <br><br><br>
        <div id="div">
    
        </div>
    </body>
    </html>
    
    package com.lingaolu.servlet;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.*;
    import java.io.IOException;
    
    /**
     * @author 林高禄
     * @create 2020-08-07-14:58
     */
    @WebServlet("/demo1")
    public class Demo1 extends HttpServlet {
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            String name = request.getParameter("name");
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write("<h1>"+name+"</h1>");
        }
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }
    

    启动访问,单击按钮前

    单击按钮后

     

    展开全文
  • js原生ajax请求

    万次阅读 2017-12-15 10:42:45
    AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 即 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。它可以在不重新加载整个页面的情况下完成与服务器交换数据并更新部分网页。
  • js原生ajax汇总函数

    2021-07-02 14:46:25
    //ajax model function ajax(url, method, msg, fn, id,innerHTMLId) { var xmlhttp; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  • 本文给大家分享一个自己写的基于原生JSAjax的请求函数功能,需要的朋友可以参考下
  • JS原生AJAX请求

    2021-09-16 17:15:26
    响应 if(ajax.readyState == 4 && ajax.status == 200){ var msg = ajax.responseText; console.log(msg); } } 2. POST请求 // 1. 创建ajax对象 var xhr = XMLHttpRequest(); // 2. 设置请求参数 xhr.open('POST',{...
  • JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的...
  • js原生ajax写法

    千次阅读 2018-05-11 21:52:02
    博主在大二做数据库课设时,接触的js。边学边做,当时还没接触ajax,所以在遇到每次请求地址都会刷新这个问题时,博主干了你们绝对想不到的事:在页面里用了很多“隐形”的frame来阻止当前页面的刷新。其实当时博主听...
  • javascript原生ajax写法

    2021-08-06 03:40:23
    // JavaScript Document var XHR; //定义一个全局对象 function createXHR() { //首先我们得创建一个XMLHttpRequest对象 if (window.ActiveXObject) { //IE的低版本系类 XHR = new ActiveXObject('...
  • 原生javascript实现ajax发送pos请求,这样可以脱离jquery框架,
  • 本文实例讲述了原生JS简单实现ajax的方法。分享给大家供大家参考,具体如下: HTML部分: <body> <input type=button value=Ajax提交 onclick=Ajax(); /> <div id=resText></div> </body> 这里...
  • javascript原生ajax写法分享_.docx
  • js原生ajax与jquery的ajax的用法区别

    千次阅读 2019-02-15 22:08:42
    Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指:发送方发出...1.原生JavaScript写法:(原生jsajax就像打电话)...
  • AJAX=AsynchronousJavaScriptandXML(异步的JavaScript和XML)。AJAX不是新的编程语言,而是一种使用现有标准的新方法。AJAX是与服务器交换数据并更新部分网页的技术,在不重新加载整个页面的情况下。就是利用JS来无...
  • JS原生Ajax(XMLHttpRequest对象)

    万次阅读 2020-09-04 23:24:25
    Ajax 用途:主要是引用于异步交互,当使用Ajax模型,HTML 页面能够快速地将数据逐步更新显示在用户界面上,不需要重载(刷新)整个页面。这使得HTML页面能成更快速地对用户的操作进行反馈。 Ajax的实现流程 ...
  • js 原生AJAX发送请求详解

    万次阅读 2018-06-12 16:42:45
    使用XHR对象的基本步骤: (1)创建XHR对象 var xhr = new XMLHttpRequest( ); (2)监听XHR对象的状态改变事件 xhr.onreadystatechange = function(){ if( xhr.readyState===4){ if(xhr.status===200){ 完成且成功 } ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,193
精华内容 23,677
关键字:

js原生ajax

友情链接: t3530-cm-man.rar