AJAX 请求数据

最新推荐文章于 2024-01-06 15:35:25 发布
最新推荐文章于 2024-01-06 15:35:25 发布
阅读量70 收藏
点赞数
文章标签： java javascript python ViewUI
原文链接：https://my.oschina.net/u/564141/blog/164217
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

AJAX简介:

 asynchronouse  javascript and xml 

1.为什么要用ajax??

 异步操作,发送了一个异步的request,这时用户不用等待 ,可以进行后续的操作,能更大限度的提升用户体验度       特点: 返回一张页面的局部内容  异步刷新

 2.简单使用步骤:

 1.获取对象 

        Firefox

          var xhr = new XMLHttpRequest();

        IE

        * var xhr = new ActiveXObject("Microsoft.XMLHTTP");

          var xhr = new ActiveXObject("MSXML2.5.0.XMLHTTP");

          var xhr = new ActiveXObject("MSXML2.4.0.XMLHTTP");

2.重要属性

   xhr.readyState 数字类型的属性,浏览器为这个属性赋值

           0 xhr初始化 (未连接)

           1 xhr发送请求 (建立连接)

           2 xhr|Servlet接受到请求 (协议头已接收)

           3 Servlet提供response的时候  (正在接收协议体)

           4 response到达html页面时候  (完成)

   xhr.status 服务器返回的http协议号

           200 正常返回的状态码

           404

           500

  *** 事件

     xhr.onreadystatechange=function(){

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

                //代码块

             }

           }

3.方法

  xhr.open("POST|GET",url,(是否异步true)) 建立连接

  xhr.send();   传输数据

 

 ajax使用:

   1.获取对象

   2.建立连接发送请求

   3.获得服务器返回的结果

   4.处理结果

 开发过程:

   1.服务器端程序

   2.页面脚本

     1)创建对象

     2)设置监听函数

     3)处理请求

   3.获取相应的属性:

  xhr.responseXML - DOM对象

        获得服务器返回的xml数据

        服务器必须设置: response.setContentType("text/xml")

  xhr.responseText

    $(span).innerHTML=xhr.responseText;

   

   

  多次执行ajax请求,怎么解决浏览器缓存的问题?(IE问题比较严重)

   1.改变请求路径

   get方式:

   xhr.open("get","show?r="+Math.random());

   post方式:

   xhr.send(path+"&r="+Math.random());

   2.在服务器端程序中,要求浏览器不缓存数据

   response.setHeader("cache-control","no-cache");

   //清空浏览器缓存

   response.setHeader("progma", "no-cache");

   response.setHeader("Cache-Control", "no-cache");

   response.setDateHeader("Expires", 0);  

 ===================

封装ajaxUtil 

var Ajax = {   

                createXHR:function(){

                    if(window.XMLHttpRequest){

                      var xhr = new XMLHttpRequest();

                      return xhr;

                    }else if(window.ActiveXObject){

                      var xhr = new ActiveXObject("Microsoft.XMLHTTP");

                      return xhr;

                    }

                 },

                 sendRequest:function(method,url,data,callback){

                    var xhr = this.createXHR();

                    xhr.open(method,url);

                    if(method=="GET"){

                      xhr.send(null);

                    }else if(method=="POST"){

                      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                      xhr.send(data);

                    }

                    xhr.onreadystatechange=function(){

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

                          var p = {

                                    text:xhr.responseText,

                                    xml:xhr.responseXML

                                  }

                          callback(p);

                      }

                    }

                 }

               };

---------------------------------------------------------------------------------------------------------

简单例子:

  

/**

 * 用户名验证举例

 * reg1.html 常规写法

 * reg2.html 用到了封装好的ajaxUtil.js

 */

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;

 

public class CheckServlet extends HttpServlet {

   protected void service(HttpServletRequest request,

         HttpServletResponse response) throws ServletException, IOException {

 

      request.setCharacterEncoding("utf-8");

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

 

      // 清空浏览器缓存

      response.setHeader("progma", "no-cache");

      response.setHeader("Cache-Control", "no-cache");

      response.setDateHeader("Expires", 0);

 

      // 接收表单数据

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

        PrintWriter out = response.getWriter();   

     

        // 连接数据库处理

      // biz--dao

      if("jim".equals(name)){

         out.println("username is registered");  

      }else{

         out.println("username is ok ");

      }

           

      out.close();

     

     

   }

}
 

Html代码:

reg1.html 

<html> 

   <head>

     <script  type="text/javascript">

       function $(tagId){

         return document.getElementById(tagId);

       }

      

       function checkUserName(){

         var name = $("nameId").value;

         var xhr ;

         if(window.XMLHttpRequest){

            xhr = new XMLHttpRequest();

         }else if(window.ActiveXObject){

            xhr = new ActiveXObject("Microsoft.XMLHTTP");

         }

         xhr.open("GET","/ajax/check?name="+name);

            xhr.send(null);

            xhr.onreadystatechange = function(){

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

                 var ret = xhr.responseText;

                  var span = $("msgId");

                  span.innerHTML = "<font color='red'>"+ret+"</font>" ;

               }

            } 

       }

     </script>

     

   </head>

   <body>

      <h1>User Register</h1>

      <table>

         <tbody>

            <tr>

               <td>User Name</td>

               <td><input type="text" id="nameId" name="name" onblur="checkUserName();"/>

                  <span id="msgId"></span>

               </td>

            </tr>

            <tr>

               <td>Password</td>

               <td><input type="password" name="pwd"/></td>

            </tr>                                      

            <tr>

               <td>confirm </td>

               <td><input type="password"/></td>

            </tr>                            

            <tr>

               <td>email</td>

               <td><input type="text"/></td>

            </tr>  

            <tr>

               <td>phone:</td>

               <td><input type="text" maxlength="9"/></td>

            </tr>     

            <tr>

               <td colspan="2">

                  <input type="button" value="user register" /> 

               </td>

            </tr>

         </tbody>

      </table>

   </body>

</html>

reg2.html

  

<html> 

   <head>

     <script  type="text/javascript" src="ajaxUtils.js"></script>

     <script  type="text/javascript">

       function $(tagId){

         return document.getElementById(tagId);

       }

      

       function checkUserName(){

         var name = $("nameId").value;

         Ajax.sendRequest("POST","/ajax/check","name="+name,cb);

       }

      

       function cb(c){

          var ret = c.text;

          var span = $("msgId");

          //innerHTML作用 方便往标签中增加内容

          span.innerHTML = "<font color='red'>"+ret+"</font>" ;

       }

     </script>

     

   </head>

   <body>

      <h1>User Register</h1>

      <table>

         <tbody>

            <tr>

               <td>User Name</td>

               <td><input type="text" id="nameId" name="name" onblur="checkUserName();"/>

                  <span id="msgId"></span>

               </td>

            </tr>

            <tr>

               <td>Password</td>

               <td><input type="password" name="pwd"/></td>

            </tr>                                     

            <tr>

               <td>confirm </td>

               <td><input type="password"/></td>

            </tr>                            

            <tr>

               <td>email</td>

               <td><input type="text"/></td>

            </tr>  

            <tr>

               <td>phone:</td>

               <td><input type="text" maxlength="9"/></td>

            </tr>     

            <tr>

               <td colspan="2">

                  <input type="button" value="user register" /> 

               </td>

            </tr>

         </tbody>

      </table>

   </body>

</html>

Xml代码: 

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5"

   xmlns="http://java.sun.com/xml/ns/javaee"

   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

  

  

      <servlet>

      <servlet-name>CheckServlet</servlet-name>

      <servlet-class>web.CheckServlet</servlet-class>

   </servlet>

 

   <servlet-mapping>

      <servlet-name>CheckServlet</servlet-name>

      <url-pattern>/check</url-pattern>

   </servlet-mapping>

     

</web-app>
  验证:

http://localhost:8080/ajax/reg2.html

 附:Ajax简易封装工具类ajaxUtil.js

var Ajax = {    createXHR:function(){

                    if(window.XMLHttpRequest){

                      var xhr = new XMLHttpRequest();

                      return xhr;

                    }else if(window.ActiveXObject){

                      var xhr = new ActiveXObject("Microsoft.XMLHTTP");

                      return xhr;

                    }

                 },

                 sendRequest:function(method,url,data,callback){

                    var xhr = this.createXHR();

                    xhr.open(method,url);

                    if(method=="GET"){

                      xhr.send(null);

                    }else if(method=="POST"){

                      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                      xhr.send(data);

                    }

                    xhr.onreadystatechange=function(){

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

                          var p = {

                                    text:xhr.responseText,

                                    xml:xhr.responseXML

                                  }

                          callback(p);

                      }

                    }

                 }

               };

 

转载于:https://my.oschina.net/u/564141/blog/164217

weixin_34190136
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax原理一篇就够了
weixin_34072159的博客
12-17 990
前言 AJAX即“Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据（而不是图片，HTML文档等资源），互联网资源的传输变得前所未有的轻量级和纯粹，这激发了广大开发者的创造力，使各式各样功能强大的网络站点，...
AJAX请求数据
weixin_52484792的博客
06-13 514
ajax,js
数据请求之AJAX
qq_50582468的博客
03-24 1993
在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，不刷新整个页面就可以进行数据局部更新。
ajax请求详解
Jade_Sir的博客
08-08 1550
规则：是请求和响应的过程响应：是服务器把资源返回给客户端（浏览器）的过程同步：同步就是上一段代码没有执行完毕，不会接着执行下一段代码，JavaScript的执行机制是从上往下执行的，当有一个地方执行错误就不会继续往下执行，所以当有一段请求没有回来的时候浏览器就会一直等到上一段请求回来再接着下一段请求，这时如果上一段代码一直请求不回来就会影响下面请求，就堵死在上一段请求中。异步：异步请求就是你请求你的，我请求我的。各自执行各自代码，互不干扰，就不会发生上一个请求错误，下一个请求不继续执行的问题。...
如何使用Ajax进行请求数据
weixin_58032179的博客
07-07 706
Ajax请求向同源（即协议、域名和端口都相同）的服务器发送请求
Ajax常见请求方法（详细）
最新发布
小卡拉米的博客
01-06 4838
同源：协议，域名，端口完全相同。//CORS跨域资源共享。
ajax请求数据
LiHang1234567777的博客
08-15 295
上面是Ajax请求数据的四组方法，效果都是统一的。
.NET的Ajax请求数据提交实例
10-24
.NET Ajax请求数据提交实例的知识点涉及了.NET框架下使用Ajax技术实现数据异步提交的全过程，包括了对Ajax请求、数据提交、参数传递等关键步骤的详细分析。以下是从给定文件内容中提炼出的知识点： 1. Ajax基础：...
Ajax请求数据小实例
10-18
使用Ajax get请求数据的小例子，使用$.each()循环显示到表格，里面有接口，大家可以使用，欢迎指导学习
ajax请求后台数据实现分页功能
07-05
ajax请求后台数据实现分页功能
Ajax请求在数据量大的时候出现超时的解决方法
09-04
在开发Web应用时，我们经常会遇到使用Ajax进行数据交互的情况，特别是当数据量非常大时，可能会遇到Ajax请求超时的问题。这个问题不仅影响用户体验，也可能导致应用性能下降。本篇文章将详细探讨这个问题，并提供几...
AJAX:向服务器请求数据
Edwina_byx的博客
02-02 571
AJAX 并非编程语言，仅仅组合了浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）JavaScript 和 HTML DOM（显示或使用数据）
使用Ajax请求数据
Czm_cc的博客
10-03 1169
1. 请求文本类型的数据（jQuery方法） $("button").on("click",function(){ jQuery.ajax({ type : "get",//默认为get请求 url : "http://localhost:9999/01.txt", //请求的地址 dataType : "text", // 请求文本类型数据 success : function(data){ con
ajax实现请求数据的几种方式
认真学习前端的博客
05-22 389
【代码】ajax实现请求数据的几种方式。
如何用ajax请求后台数据的两种全网最实用且详细的写法
前端程序员、项目经理、人工智能博主
10-31 4935
第一种用最简介方便的$.post请求后端数据 $.post("你的url地址",{ data//填写后台给的参数 },function(res){ console.log(res) }) 第二种通过$.ajax的写法请求后端数据 $.ajax({ type: 'post', url: "你的url地址", cache: false, data: {//后台给的参数}, dataType: 'json',//通过json格式返回
ajax请求方式
zhouyuqin01的博客
11-24 1213
Axios 的请求方式 1：get请求 axios.get(url[,config]) axios.get('/list?articel=0') .then(function(resolve){ }) .catch(function(error){ }) axios.get('/list',{ params:{ articel: 0 } }) .then(resolve => { }) .catch( error => {}) 2: post请求 axios.p
详解Ajax请求
热门推荐
qq_49900295的博客
03-30 2万+
目录 1.$.get()函数的语法 2.$.get()发起不带参数的请求 3.$.get()发起带参数的请求 4.$.post()函数的语法 5.$.post()向服务器提交数据 6.$.ajax()函数的语法 7.使用$.ajax()发起GET请求 ​8.使用$.ajax()发起POST请求 1.$.get()函数的语法 jQuery中$.get()函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用。 $.get()函数的语法如下： $..
html使用ajax请求数据
04-27
好的，我来回答你的问题。在HTML页面中使用Ajax请求数据的步骤如下： 1. 创建XMLHttpRequest对象：在JavaScript中，使用XMLHttpRequest对象来实现Ajax请求。可以通过如下代码创建XMLHttpRequest对象： ``` var xhr = new XMLHttpRequest(); ``` 2. 设置请求参数：设置请求的URL和请求方式（GET或POST），以及需要发送的数据。可以使用如下代码设置请求参数： ``` xhr.open('GET', 'http://example.com/data', true); ``` 3. 发送请求：使用send()方法发送请求。如果请求是GET方式，send()方法不需要参数；如果请求是POST方式，可以将需要发送的数据作为参数传递给send()方法。例如： ``` xhr.send(); ``` 4. 处理响应：使用onreadystatechange事件处理服务器响应。在该事件中，可以通过readyState和status属性获取响应的状态信息，通过responseText属性获取服务器返回的数据。例如： ``` xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var data = xhr.responseText; // 处理服务器返回的数据 } }; ``` 以上就是使用Ajax请求数据的基本步骤。需要注意的是，Ajax请求是异步的，因此需要使用回调函数处理服务器返回的数据。同时，需要注意跨域请求的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值