`

js写ajax

 
阅读更多
AJAX:全称“Asynchronous JavaScript and XML” (异步的JavaScript与XML)

  AJAX请求的特点:

  1,不刷新页面

  2,服务器仅返回需要的数据

  AJAX引擎:XMLHttpRequest

  此对象是浏览器中的内置对象,在目前的所有浏览器中都支持此对象。

  IE中获取此对象:

  if(window.ActiveXObject){ var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }

  非IE中获取此对象:

  var xmlHttp=new XMLHttpRequest();

  兼容模式:

  var xmlHttp;//声明一个对象 function createXMLHttpRequest(){ if(window.ActiveXObject){//如果是IE,采用这种方式获取 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }else{//非IE采用这种方式获取 xmlHttp=new XMLHttpRequest(); } }

  请求的格式:

   xmlHttp.open(请求方式,请求地址,[是否为异步请求]);

   xmlHttp.send();

  Get请求:

  xmlHttp.open("GET","ajax.do name=tom",true); xmlHttp.send();

  注:

  get请求的传值方式为请求地址后面跟  key=value

  Post请求:

  xmlHttp.open("POST","ajax.do",true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("name=tom");

  注:

  post请求的传值方式是在send()方法中进行传值,多个值用逗号隔开:name=tom,age=12

  setRequestHeader的意思是设置请求头的类型为表单类型:Content-Type="application/x-www-form- urlencoded" 是form表单的默认属性

  一个完整的AJAX请求的流程:

  1,创建XMLHttpRequest对象

  2,调用xmlHttp.open()设置请求内容

  3,设置回调函数(根据服务器返回的状态信息,做什么事情)

  4,调用xmlHttp.send()发送请求

  function sendAjax(){ createXMLHttpRequest();//调用上面设置的兼容模式 xmlHttp.open("GET","ajax.do name=tom",true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.onreadystatechange=callback;//状态信息发生改变调用函数 xmlHttp.send(); } //回调函数 function callback(){ alert("callback"); } sendAjax();//浏览器会弹出几次框(不同的浏览器可能不同)

  获取AJAX请求的状态码和HTTP协议的状态码:

  AJAX请求的状态码有四个值:

  var xmlState=xmlHttp.readyState;

  1,已初始化

  2,数据传输中

  3,响应数据传输中

  4,响应完毕

  HTTP协议的状态码有很多:

  var ;

  常见的状态码如下:
状态码 意义
200 服务器正确处理了请求并响应
404 请求的页面未找到
403 没有权限访问请求的页面
405 页面不接收该请求方式
408 请求超时
500 服务器处理请求时发生异常
503 服务暂时不可用
304 网页未修改

  使用Servlet获取服务器端的文本:

  //ajax.do //这是Servlet类中的doGet方法 public void doGet(HttpServletRequest request,HttpServletResponse response){ PrintWriter out=response.getWriter(); out.print("OK"); out.flush(); out.close(); }

  //callback function callback(){ if(xmlHttp.readyState==4){//响应完毕后 if(xmlHttp.status==200){//http状态码为200时 var result=xmlHttp.responseText;//获取ajax请求的文本内容 alert(result); } } }
总结:

    Ajax请求使用 XMLHttpRequest 对象
    IE和非IE获取对象的方式不同
    GET,POST请求的传值问题
    Ajax请求的流程
    Ajax请求的状态码和HTTP协议中服务器返回的状态码
    获取简单地服务器返回的文本信息
分享到:
评论

相关推荐

    js写AJAX 异步调用 -实现回调

    在JavaScript中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本文将深入讲解如何使用纯JavaScript编写AJAX异步调用,并...

    手写js实现Ajax局部刷新技术

    国家电网的一个面试题,要求不使用ajax控件实现页面的局部刷新

    手写AJAX方法

    自己写AJAX方法,看看它内部是怎么实现的

    原生JS写Ajax的请求函数功能

    标题中提到的"原生JS写Ajax的请求函数功能"指的是使用JavaScript原生语言编写发送和接收HTTP请求的函数,这一过程通常被称为Ajax(Asynchronous JavaScript and XML)。Ajax使得网页可以在不重新加载整个页面的情况...

    ajax和js的web开发

    在Web开发领域,Ajax(Asynchronous JavaScript and XML)与JavaScript是两种至关重要的技术,它们共同构建了现代网页的动态交互体验。Ajax的核心理念是通过后台数据异步交换,实现页面无需刷新即可更新部分内容,...

    Node.js解析ajax参数Demo

    **Node.js解析Ajax参数Demo** 在Web开发中,前端与后端的数据交互是必不可少的,Ajax(Asynchronous JavaScript and XML)技术就是实现这种交互的重要手段。在这个“Node.js解析Ajax参数Demo”中,我们将深入探讨...

    ajax手写 ajax 函数 js文件1.JS

    ajax手写 ajax 函数 js文件

    Js拦截全局ajax请求

    在JavaScript开发中,有时我们需要对全局的Ajax请求进行拦截,以便进行统一的处理,比如添加统一的错误处理、数据格式化、性能监控等。这种需求通常可以通过“Ajax Hook”技术来实现。Ajax Hook允许我们捕获并修改...

    JS&AJAX代码示例

    JavaScript(简称JS)和AJAX(异步JavaScript和XML)是Web开发中不可或缺的技术,用于构建动态、交互式的网页应用。本压缩包“JS&AJAX代码示例”提供了若干实例,帮助开发者深入理解这两项技术的核心概念和用法。 *...

    挑战javascript&ajax应用开发

    3. **前端框架**:如 React、Vue.js 或 Angular,它们封装了 AJAX 调用,提供组件化开发方式,进一步提高了开发效率和代码复用性。 4. **WebSockets**:提供双向通信的协议,适用于实时应用,如在线聊天、股票交易等...

    js实现Ajax效果的增删改查

    在这个“js实现Ajax效果的增删改查”主题中,我们将深入探讨如何利用JavaScript和Ajax技术来实现数据库数据的CRUD(创建、读取、更新和删除)操作。 首先,我们需要理解Ajax的工作原理。Ajax通过创建XMLHttpRequest...

    jstree ajax application

    根据提供的文件信息,我们可以推断出这是一篇关于 jstree 的 AJAX 应用程序的文章。jstree 是一个 jQuery 插件,用于创建树形结构的导航菜单或图谱。通过结合 AJAX 技术,可以实现动态加载数据,提高用户体验。 ###...

    C#+js+ajax+MYSQL实现我的个人主页

    【标题】:“C#+js+ajax+MYSQL实现我的个人主页”这一项目主要涵盖了Web开发中的核心技术,通过结合C#后端处理、JavaScript前端交互、Ajax异步通信以及MySQL数据库存储,构建一个完整的个人主页系统。 【C#】:C#是...

    js写的ajax核心构造和改写alert函数

    在JavaScript的世界里,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这个技术的核心在于XMLHttpRequest对象,它是...

    js实现AJAX源代码

    **JavaScript实现AJAX的核心知识点** AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器交换数据并更新局部网页内容,提高了用户体验...

    MicrosoftAjax.js 实现Ajax类库

    MicrosoftAjax.js是微软为.NET Framework开发的一个Ajax库,它使得开发者能够在JavaScript环境中更轻松地实现Ajax功能。** 在JavaScript中,实现Ajax通常涉及以下几个关键步骤: 1. **创建XMLHttpRequest对象**:...

    ajax搜索下拉菜单提示js源代码

    总结,Ajax搜索下拉菜单提示js源代码是结合Ajax和JavaScript实现的一种动态搜索功能,通过监听用户输入、发送Ajax请求、处理返回数据并动态更新页面内容,提高了搜索的效率和用户体验。理解并掌握这些知识点,有助于...

    Ajax(Ajax使用js包)

    使用Ajax实现从服务器读取数据,包括Ajax实现的详细步骤

    原生js+ajax通用函数+php

    本函数封装了js的ajax,php为处理后台数据,仅支持post,代码很简洁

    JS+AJAX+CSS中文帮助文档和示例

    JavaScript(JS)、Ajax(异步JavaScript和XML)和层叠样式表(CSS)是Web开发中的核心技术,它们共同构建了动态、交互性和视觉吸引力强的网页应用。这个压缩包包含了这些技术的中文帮助文档和示例,对于学习和理解...

Global site tag (gtag.js) - Google Analytics