`

Ajax原理及应用三(发送请求和处理响应的一般步骤)

    博客分类:
  • ajax
阅读更多

一、创建了XMLHttpRequest对象后,便可以通过其属性和方法发送和处理HTTP请求,发送请求和处理响应的一般步骤如下:

  • 1、调用open()方法设置请求方式、目标URL,同步或者异步方式以及可能需要的授权信息。
  • 2、根据需要,调用setRequestHeader(),设置指定的HTTP头,发送GET请求时,不需要设置指定的请求头,而发送post请求时,需要设置“content-type”头设置为“application/x-www-form-urlencoded",否则服务器端脚本将无法解析发送到服务器端的数据内容。
  • 3、对于异步请求,如果需要对服务器获取和操作响应结果,则在发送请求之前,需要为onreadystatechange属性指定处理方法。该函数用户对服务器响应进行处理。
  • 4、调用send()方法发送请求,对于GET请求,send()方法参数为null,对于post请求,则send()方法参数为要发送的内容。
  • 5、在为onreadystatechage事件句柄指定函数时,通过判断readState是否到达4,判断响应是否已全部接收到。当readyState为4时,通过getResponseHeader()或者getAllRequestHeader()方法获取响应头信息,通过responseText或者responseXML属性获取响应内容。
  • 6、对响应内容进行相应操作。


二、创建ajax实例,代码如下:

Javascript代码 复制代码
  1. if(typeof(XMLHttpRequest)=='undefined' && window.ActiveXObject)   
  2.     {      
  3.       function XMLHttpRequest(){      
  4.         var xml_http_arr=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];      
  5.         var xml_request;      
  6.         for(var i=0;i<xml_http_arr.length;i++){      
  7.            if(xml_request = new ActiveXObject(xml_http_arr[i]))      
  8.             break;      
  9.          }         
  10.        return xml_request;      
  11.        }      
  12.   }      
  13.   
  14. var xml_http_request=new XMLHttpRequest();    
  15. //登录   
  16. function login(){   
  17.          
  18.    var url="${pageContext.request.contextPath}/cbice/webuserAction.do?method=login";       
  19.     xml_http_request.open("post",url,true);   
  20.     xml_http_request.setRequestHeader("Content-Type","text/html;charset=gbk");   
  21.     xml_http_request.onreadystatechange=getResultValue;   
  22.     xml_http_request.send(url);   
  23.   
  24.        
  25. }   
  26.   function getResultValue(){   
  27. if(xml_http_request.readyState==4){   
  28.     if(xml_http_request.status==200){   
  29.         var res=xml_http_request.responseText;   
  30.         alert("成功"+res);   
  31.     }else{   
  32.         alert("失败");   
  33.     }   
  34. }   
  35.  }  

http://shawnfree.iteye.com/blog/375456

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    ajax原理及用法

    ### AJAX原理及用法 #### 一、什么是Ajax技术? Ajax(Asynchronous JavaScript and XML,异步JavaScript与XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据...

    jsp+ajax发送GET请求的方法

    本文将介绍JSP结合Ajax技术通过GET方法发送请求的详细步骤和实现方法,该技术在数据请求和处理方面非常实用,尤其适用于需要在用户界面交互中实时校验数据的场景。 首先,我们创建一个简单的注册表单页面,页面中...

    AJAX异步处理原理分析

    **AJAX异步处理原理分析** AJAX,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在不刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现局部...

    Ajax开发步骤及代码

    1. **JavaScript**: AJAX的核心是JavaScript,它负责处理用户的交互、创建XMLHttpRequest对象、发送请求以及接收和处理服务器响应。 2. **XMLHttpRequest对象**: 这是AJAX的基础,它允许JavaScript在后台与服务器...

    Ajax请求的五个步骤!!!

    #### 三、Ajax请求的五个步骤 ##### 1. 创建一个异步对象 创建一个异步对象是使用Ajax的第一步。这通常通过`XMLHttpRequest`对象来完成。 ```javascript var xmlhttp = new XMLHttpRequest(); ``` 需要注意的是,...

    使用Ajax向PHP服务端发送请求并返回JSON数据

    以下是一个基本的Ajax请求示例: ```javascript // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置回调函数处理响应 xhr.onreadystatechange = function() { if (xhr.readyState === ...

    chrome扩展插件获取ajax请求记录

    其中,获取Ajax请求记录是开发者调试过程中非常关键的一环,因为它可以帮助开发者检查数据的发送和接收情况,排查网络问题,以及理解应用程序的工作流程。 Chrome扩展插件就是一种增强浏览器功能的方式,它们可以...

    Ajax实现原理和使用详解

    总结,Ajax 的实现原理主要包括使用 XMLHttpRequest 对象进行异步请求,通过 JavaScript 处理请求的发送和响应的接收,以此实现页面的局部更新,提升用户体验和性能。在实际开发中,通常还会结合 jQuery 或其他库...

    关于ajax原理的ppt

    - **JavaScript**:负责编写业务逻辑,包括处理用户事件、创建和发送Ajax请求。 - **CSS**:用于定义页面元素的外观和样式,提升用户体验。 - **DOM**:文档对象模型,JavaScript通过DOM来操作HTML或XML文档,获取或...

    如何在Thymeleaf中实现ajax请求url的可靠构造

    在Thymeleaf中构建可靠的Ajax请求URL是Web开发中的一个重要环节,特别是在使用Spring Boot和其他MVC框架时。Thymeleaf是一个强大的服务器端模板引擎,它可以与Ajax结合使用,提供动态更新页面的能力,而无需刷新整个...

    ajax 技术基本应用

    在Ajax请求中,可以通过JSON.stringify()将JavaScript对象转换为JSON字符串发送给服务器,服务器处理后返回JSON数据,再通过JSON.parse()解析成JavaScript对象。 **4. jQuery与Ajax** jQuery库简化了Ajax操作,...

    Ajax底层原理及使用有那些方式和面试问题

    ### Ajax底层原理及使用方式详解 #### 一、Ajax简介 Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用于创建交互式网页应用的技术。它不是一种新的编程语言,而是一种使用现有标准的新方法...

    Ajax的原理

    在提供的文件“jQuery_CookBook中文版.pdf”中,应该包含了关于如何使用jQuery进行Ajax请求的详细教程和示例,包括如何设置请求参数、处理响应以及处理错误等。 总的来说,Ajax技术极大地提高了网页的交互性和用户...

    ajax ajax原理 ajax代码 ajax编程 ajax学习

    - **jQuery 和 Axios**:学习Ajax时,可以了解jQuery的$.ajax()方法和现代JavaScript库Axios,它们都提供了更方便的接口来处理Ajax请求。 在项目中,Ajax常用于实现动态加载、表单提交、实时通讯等功能。随着前端...

    JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri

    8. **错误处理与调试**:学习如何有效地处理JavaScript和Ajax请求中的错误,以及使用浏览器的开发者工具进行调试,是提升开发效率和代码质量的重要环节。 9. **jQuery与Ajax**:jQuery是一个流行的JavaScript库,...

    Ajax异步请求分页

    2. **后端实现**:在C#中,可以创建一个Web API或ASP.NET MVC控制器,处理Ajax请求。该控制器方法接收页码和每页大小参数,执行相应的数据库查询,然后返回JSON数据。 **五、优化与扩展** 1. **缓存优化**:对于...

    Ajax异步请求简单示例

    3. **设置回调函数**:Ajax请求是异步的,所以我们需要设置事件监听器来处理响应。主要有`onreadystatechange`和`ontimeout`等。当状态改变时,`onreadystatechange`会被调用。例如: ```javascript xhr....

    简单的Ajax应用

    - **jQuery或其他库**:为了简化Ajax操作,开发者可能会使用jQuery等库,它们提供了简洁的API来处理Ajax请求。 - **跨域请求**:如果请求的目标不在同一个源下,可能需要处理跨域资源共享(CORS)问题。 - **错误...

    ajax实例演示源代码详细描述了ajax的应用

    在Web开发中,Ajax被广泛用于创建更快、更互动的用户体验,提高网页应用的响应速度和效率。本篇文章将深入探讨Ajax实例演示中的关键知识点,以及如何在实际项目中应用这些知识。** **一、Ajax工作原理** Ajax的核心...

    ajax手写代码应用

    - **CORS**:跨域资源共享,通过设置服务器响应头实现跨域Ajax请求。 - **Ajax库**:jQuery、axios、fetch.js等库提供了更高级的Ajax功能,简化开发。 6. **注意事项** - 考虑到兼容性,需要处理旧版浏览器对...

Global site tag (gtag.js) - Google Analytics