`
feohoo
  • 浏览: 112620 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

通过js发送请求的几种方法

 
阅读更多

  var httpAdapter;
    //创建一个httpAdapter对象
    function GethttpAdapterRequest()
    {
        //httpAdapter = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new httpAdapterRequest();
         return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    }
   
    //以Get方式发送请求,默认Content-Type为"text/xml; charset=gb2312"
    this.GetData = function(url)
    {
        httpAdapter = GethttpAdapterRequest();
   httpAdapter.Open("GET",url, false);
   httpAdapter.SetRequestHeader ("Content-Type","text/xml; charset=gb2312");
//   httpAdapter.SetRequestHeader ("SOAPAction","http://tempuri.org/getStr");
   httpAdapter.Send(context);
   return httpAdapter;
    }
   
    //以POST方式发送请求,默认Content-Type为"application/x-www-form-urlencoded"
    this.PostData = function (url,context)
    {
        httpAdapter = GethttpAdapterRequest();
        httpAdapter.Open("POST",url, false);
   httpAdapter.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//   httpAdapter.SetRequestHeader ("SOAPAction","http://tempuri.org/getStr");
   httpAdapter.Send(context);
   return httpAdapter;
    }
   
   
    this.GetDataInAsync = function (url,callbackMethod)
    {
        httpAdapter = GethttpAdapterRequest();
   httpAdapter.Open("GET",url, true);
   httpAdapter.SetRequestHeader ("Content-Type","text/xml; charset=gb2312");
//   httpAdapter.SetRequestHeader ("SOAPAction","http://tempuri.org/getStr");
   httpAdapter.Send(context);
   httpAdapter.onreadystatechange = callbackMethod;
    }
   
    this.PostDataInAsync = function (url,context,callbackMethod)
    {
        httpAdapter = GethttpAdapterRequest();
        httpAdapter.Open("POST",url, true);
   httpAdapter.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//   httpAdapter.SetRequestHeader ("SOAPAction","http://tempuri.org/getStr");
   httpAdapter.Send(context);
   httpAdapter.onreadystatechange = callbackMethod;
    }
   
    //获取指定地址的域名
    this.GetHost = function(url)
    {
        var host = "null";
        var ArryHost=new Array();
        if(typeof url == "undefined"|| null == url)
        {
            url = window.location.href;
        }
        var regex = /.*\:\/\/([^\/]*).*/;
        var match = url.match(regex);
        if(typeof match != "undefined" && null != match)
        {
            ArryHost = match[1].split(/:/);
            host =ArryHost[0];
        }
        return host;
    }
   
    //获取当前地址的域名
    this.GetLocalHost=function()
    {
       return GetHost(document.URL);
    }

 

  以前每次写AJAX请求总要写好几个JS函数,包括创建XMLHttpRequest对象、发送请求、成功后的处理函数和失败后的处理函数,下面的JS是把这些东西重构之后参数化的形式,然后放到一个单独的net.js里,后续使用只需引入这个JS,然后新建相应的对象和处理函数即可,可以直接拿来使用

   var net = new Object();
   net.READY_STATE_UNINITIALIZED = 0;
   net.READY_STATE_LOADING = 1;
   net.READY_STATE_LOADED = 2;
   net.READY_STATE_INTERACTIVE = 3;
   net.READY_STATE_COMPLETE = 4;

 

   

   net.ContentLoader = function(url,onload,onerror,method,params,contentType)
   {

    this.req = null;
    this.onload = onload;
    this.onerror = (onerror) ? onerror : this.defaultError;
    this.loadXMLDoc(url,method,params,contentType);
   }

 

   net.ContentLoader.prototype = {
   


   onReadyState: function(){
      
     var req = this.req;
     var ready = req.readyState;
     if(ready == net.READY_STATE_COMPLETE)
     {
        var httpStatus = req.status;
     if(httpStatus == 200 || httpStatus == 0)
         this.onload.call(this);
        else
         this.onerror.call(this);
            }
    },

    defaultError: function(){
          
     alert("error in fetching data!! readyState=="+this.req.readyState+"\n\nstatus="+this.req.status
          +" \n\nheaders"+this.req.getAllResponseHeaders());

    }

 

   }

 

   net.ContentLoader.prototype.loadXMLDoc = function(url,method,params,contentType){

     if(!method)  //如果没有传入method 参数值,则默认为GET
     {
         method = "GET";
     }
     if (!contentType && method=="POST"){
         contentType="application/x-www-form-urlencoded;";
     }
        
     if(window.XMLHttpRequest)
     {
        this.req = new XMLHttpRequest();
      }
     else if(window.ActiveXObject)
     {
        this.req = new ActiveXObject("Microsoft.XMLHTTP");
     }
     if(this.req)
     {

        
       try{
            var loader = this;   
            this.req.onreadystatechange = function(){
                loader.onReadyState.call(loader);
            }
            this.req.open(method,url,true); 
            //POST方法需要设置的属性
            if (contentType){
               this.req.setRequestHeader("Content-Type", contentType);
            } 
            this.req.send(params);
     
       }catch(err)
      { 
          this.onerror.call(this);
      }
    }
 }

 

    代码内容不在做过多解释,如果你对JS面向对象和prototype不太熟悉的话请查阅相关书籍,下面演示如何使用:

1. 把上述内容单独放到一个文件net.js(名称可自己定义)

2. 在要使用的JSP页面上引入这个net.js  即  <script src="net.js"> </script>

3. 发送请求GET方式

   new  net.ContentLoader("http://localhost:8080/CfgWeb/AppLogin.do",getMessage);  

   其中第一个参数是请求的后台程序地址,第二个参数是请求成功后的处理函数(自己定义)

   后面的参数可省略,也可自己添加第三个参数(请求不成功的处理函数)

   function getMessage()

   {

        alert(this.req.responseText);  //简单的输出返回结果的字符串形式

        alert(this.req.responseXML);   //XML形式,后面就根据你的需要解析这个XML了

   }

4. 发送POST请求

   new net.ContentLoader("http://localhost:8080/CfgWeb/AppLogin.do?formAction=autoComplete",getMessage,null,"POST","&userName=wangwei&password=123" );

   function getMessage()

   {

        alert(this.req.responseText);  //简单的输出返回结果的字符串形式

        alert(this.req.responseXML);   //XML形式,后面就根据你的需要解析这个XML了

   }

 

分享到:
评论

相关推荐

    【JavaScript源代码】React中使用axios发送请求的几种常用方法.docx

    // 在发送请求之前做些什么 return config; }, error =&gt; { // 对请求错误做些什么 return Promise.reject(error); } ); axios.interceptors.response.use( response =&gt; { // 对响应数据做点什么 return...

    vue resource发送请求的几种方式

    无论是GET请求还是POST请求,在发送请求时都可能需要设置请求头headers。这可以用于指定认证信息、内容类型、语言等。通过将headers对象作为第二个参数传递给请求方法,可以轻松实现这一点。例如: ``` this.$...

    Http发送请求

    本篇文章将深入探讨HTTP发送请求的原理、响应机制以及如何通过编程实现。 一、HTTP请求概述 HTTP请求由客户端发起,通常是一个浏览器,用于获取或更新服务器上的资源。一个完整的HTTP请求包括以下几个部分: 1. ...

    javascript与jsp发送请求到servlet的几种方式实例

    本篇文章将详细介绍JavaScript和JSP向Servlet发送请求的几种常见方式。 **JavaScript提交至Servlet的5种方式** 1. **重定向(Redirect)** ```javascript function submitForm1(){ window.location.href = ...

    使用AJAX发送异步请求

    2. `send()`: 当`open()`方法配置好请求后,使用`send()`方法发送请求。如果请求类型是GET,且所有数据都在URL中,`send()`通常传入`null`。如果是POST请求,可以将数据作为参数传入。 3. `readyState`: 这个属性...

    前端 如何把请求发到 后端 的 Controller

    前端向后端发送请求的方式主要有以下几种: - **GET方法**:通常用于获取数据。 - **POST方法**:用于提交数据到服务器,例如创建资源。 - **PUT方法**:用于更新已存在的资源。 - **DELETE方法**:用于删除资源。 ...

    在Web关闭页面时发送Ajax请求的实现方法

    为了解决这一问题,我们可以采取以下几种方案: 1. 发送同步的Ajax请求。可以通过将`XMLHttpRequest`的`open`方法的第三个参数设置为`false`来创建一个同步请求。但是这种方法会导致用户需要等待请求的完成才能关闭...

    javascript发送邮件

    不过,可以通过几种间接方式实现这个功能。 首先,常规方法是利用`window.location.href`或`a`标签的`href`属性来触发邮件客户端。例如: ```javascript function sendEmail() { var email = "recipient@example....

    js访问handler中任意方法

    在这个示例中,`js访问handler中任意方法`意味着前端JavaScript可以向后端发送特定格式的请求来调用Handler中的任意方法。 ### 2. 使用 Reflection 动态调用方法 在C#中,`System.Reflection`命名空间提供了反射的...

    谷粒商城P84 点击选择分类后不发送请求

    在“谷粒商城P84 点击选择分类后不发送请求”这个问题中,我们可以深入探讨几个关键的IT知识点,这些知识点与Web开发、前端交互、网络请求以及问题排查紧密相关。 首先,让我们理解“谷粒商城”可能是一个电子商务...

    JS调用后台带参数的方法

    这涉及到前端JavaScript与后端服务之间的交互,特别是如何在发送请求时携带参数。 ### JS调用后台带参数的基本概念 在Web开发中,前端(通常是JavaScript)与后台(服务器端脚本如PHP、Java等)进行数据交换是非常...

    js中几种实用的跨域方法原理详解

    本文将详细介绍几种常见的JavaScript跨域方法。 1. JSONP(JSON with Padding) JSONP是一种早期的跨域解决方案,利用了HTML允许从不同源动态加载脚本的特性。当通过AJAX请求JSON数据时,由于同源策略限制,直接请求...

    JS几种分页

    下面将详细介绍几种常见的JavaScript分页实现方式。 1. 基于DOM操作的简单分页 最基础的分页方法是通过JavaScript直接操作DOM元素来实现。首先,计算出总页数,然后根据当前页码动态创建或更新页面上的链接。用户...

    表格制作软件中实现ajax跨域异步单点登录的方法

    而JSONP(JSON with Padding)是ajax中实现跨域请求的一种常用手段,它通过动态创建`&lt;script&gt;`标签的方式,绕过了浏览器的同源策略限制。 在FineReport中实现跨域异步单点登录的过程可以分为以下几个步骤: 1. 在...

    原生JS发送异步数据请求

    原生JavaScript发送异步数据请求是Web开发中的基础技能,主要应用于向服务器获取或发送数据,而无需刷新整个页面。这种技术使得用户界面更加友好,提高了用户体验。在没有依赖任何框架的情况下,我们可以使用两种...

    几种调用WebService的方法

    4. **发送请求**:通过`xmlhttp.Send(data)`方法发送包含请求数据的POST请求。 5. **处理响应**: - 通过`try-catch`语句块捕获可能的错误。 - 如果状态码为200(成功),则返回成功的响应文本。 - 如果出现错误...

    ajax请求后台接口数据与返回值处理js的实例讲解

    在$.ajax方法中,通过data参数传递键值对给后端服务,type参数指定了发送请求的方式为POST。在success回调函数中,可以处理服务器返回的数据,通常是JSON格式的数据。根据返回数据中字段SuccessCode的值,执行不同的...

    【JavaScript源代码】vue封装axios的几种方法.docx

    请求拦截器可以在发送请求前进行预处理,例如添加全局的加载提示: ```javascript Service.interceptors.request.use(config =&gt; { loadingInstance = Loading.service({ lock: true, text: 'loading...' }); ...

    ios开发 HTTP请求方法

    4. **JSON数据**: JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛用于API交互。在iOS中,可以使用`NSJSONSerialization`类进行JSON的编码和解码。发送JSON数据时,通常将JSON对象转换为`...

Global site tag (gtag.js) - Google Analytics