一、Ajax的对象 XMLHttpRequest的方法

方法 描述
abort() 停止当前请求
getAllResponseHeaders() 把 HTTP请求的所有响应首部作为健／值对返回
getResponseHdader(“header”) 返回指定首部的串值
open(“method”,”url”) 建立对服务器端调用。Method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL
send(conten) 向服务器发送请求
setRequestHeader(“header”,”value”) 把制定首部设置为所提供的值。在设置任何首部之前必须先调用open()

二、发送请求

setRequestHeader(header,value)

  • 当浏览器向服务器请求页面时，它会伴随着这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据（metadata）.首部信息用来声明一个请求是GET还是 POST。
  • Ajax请求中，发送首部信息的工作可以由setRequestHeader完成
  • 参数header :首部的名字；参数 value：首部的值
  • 如果用POST请求向服务器发送数据，需要将”Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码来。
  • 该方法必须在open()之后才能调用

三、接收响应

readyState

readyState属性表示Ajax请求的当前状态。它的值用数字代表。

  • 0 代表未初始化，还没有调用open 方法
  • 1 代表正在加载，open方法已经被调用，但 send方法还没有被调用
  • 2 代表加载完毕。send方法已被调用，请求已经开始
  • 3 代表交互中。服务器正在发送响应

  • 4 代表完成。响应发送完毕 
    每次readyState值的改变，都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数，那么每次 readyState的值的改变都会引发该函数的执行。 
    readyState值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把readyState的值统一设为4.

    实例代码呈现

 <!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

        window.onload=function(){

//            1、获取a节点，并为其添加onclick响应函数

            document.getElementsByTagName("a")[0].onclick=function(){

//                3、创建一个XMLHttpRequest对象

                var request=null;

                request= new XMLHttpRequest();

//                4、准备发送请求对数据：url

//                增加时间戳起到禁用缓存对目的

                var url= this.href+"?time="+new Date();

//                var method="GET";

                var method="POST";

//                5、调用XMLHttpRequest 对象对open方法

                request.open(method,url);

                request.setRequestHeader("ContentType","application/x-www-form-urlencoded");

//                6、调用XMLHttpRequest对send方法

                request.send("name='atguigu'");

//                7、为XMLHttpRequest 对象添加onreadystatechange响应函数

                request.onreadystatechange=function(){

                    if(request.readyState==4){

                        if(request.status==200||request.status==304){

                            alert(request.responseText);

                        }

                    }

                }

//                8、判断响应是否完成： XMLHttpRequest对象对readyState 属性值为4对时候

//                9、再判断响应是否可用：XMLHttpRequest对象对status属性值为200

//                10、打印响应结果：responseText

//                2、取消a节点对默认行为

                return false;

            }

        }

    </script>

</head>

<body>

    <a href="helloAjax.txt" >Ajax</a>

</body>

</html>

ajax 大洋与小样的第二步的更多相关文章

  1. ajax大洋第一步

    Ajax工具包 Ajax并不是一项新技术,它实际上是几种技术,每种技术各尽其职,以一种全新的方式聚合在一起. 服务器端语言:服务器需要具备向浏览器发送特定信息的能力.Ajax与服务器端语言无关. XM ...

  2. ajax是什么

    1.ajax是什么? ajax: asynchronous javascript and xml: 异步的javascript和xml. ajax是一种用来改善用户体验的技术,其本质是利用浏览器内置的 ...

  3. ajax 动态载入html后不能执行其中的js解决方法

    事件背景 有一个公用页面需要在多个页面调用,其中涉及到部分js已经写在了公用页面中,通过ajax加载该页面后无法执行其中的js. 解决思路 1. 采用附加一个iframe的方法去执行js,为我等代码洁 ...

  4. ajax+jquery+JSON笔记

    ajax (asynchronous javascript and xml -- 基于javascript和xml的异同步通讯技术)    特征: 异步通讯  异步的请求-响应模式     1.传统的 ...

  5. 21SpringMvc_异步发送表单数据到Bean，并响应JSON文本返回(这篇可能是最重要的一篇了)

    这篇文章实现三个功能:1.在jsp页面点击一个按钮,然后跳转到Action,在Action中把Emp(int id ,String salary,Data data)这个实体变成JSON格式返回到页面 ...

  6. 项目代码摘抄，dot的用法之1

    function searchTags() { var list = $('#tags-list-select option:selected').val(); console.log(list); ...

  7. JAVAEE——BOS物流项目12：角色、用户管理，使用ehcache缓存，系统菜单根据登录人展示

    1 学习计划 1.角色管理 n 添加角色功能 n 角色分页查询 2.用户管理 n 添加用户功能 n 用户分页查询 3.修改Realm中授权方法(查询数据库) 4.使用ehcache缓存权限数据 n 添 ...

  8. BOS物流项目第十二天

    教学计划 1.角色管理 a.  添加角色功能 b.  角色分页查询 2.用户管理 a.  添加用户功能 b.  用户分页查询 3.修改Realm中授权方法(查询数据库) 4.使用ehcache缓存权限 ...

  9. JQuery ajax请求struts action实现异步刷新的小实例

    这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换, ...

随机推荐

  1. JavaScript 基本类型值-String类型

    ▓▓▓▓▓▓ 大致介绍 String类型用于表示由零或多个16位Unicode字符组成的字符序列,即字符串.在JavaScript中没有单个的字符型,都是字符串.字符型就相当于只包含一个字符的字符串. ...

  2. Ajax封装函数笔记

    Ajax封装函数: function ajax(method, url, data, success) { //打开浏览器 //1.创建一个ajax对象 var xhr = null; try { x ...

  3. 业务逻辑 : forex & mlm

    业务逻辑 公司通过mlm的制度和顾客进行签约来收取资金,再把资金给第三方公司进行投资,再把所投资的回报给分配给公司和顾客. 公司的资金来自投资者,公司的营销策略来自mlm的制度,由市场人员来创建mlm ...

  4. HttpClient 工具

    什么是httpclient HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 ja ...

  5. TypeScript设计模式之策略、模板方法

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  6. Java I/O之NIO概念理解

    JDK1.4的java.nio.*包引入了新的Java I/O新类库,其目的在于提高速度.实际上,旧的I/O包已经使用nio重新实现过,以便充分利用这种速度提高,因此即使我们不显式地用nio编码,也能 ...

  7. 【2-23】分支语句（switch…case）及循环语句

    Switch-case分支语句与if语句作用相同,但需将情况都罗列出比较麻烦所以不常用. 其基本结构是: Switch(一个变量值) { Case 值1:要执行的代码段:break; Case 值2: ...

  8. Flume-ng源码解析之Sink组件

    作为启动流程中第二个启动的组件,我们今天来看看Sink的细节 1 Sink Sink在agent中扮演的角色是消费者,将event输送到特定的位置 首先依然是看代码,由代码我们可以看出Sink是一个接 ...

  9. 2764: [JLOI2011]基因补全

    2764: [JLOI2011]基因补全 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 570  Solved: 187[Submit][Status ...

  10. 1602: [Usaco2008 Oct]牧场行走

    1602: [Usaco2008 Oct]牧场行走 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 1211  Solved: 616 [Submit][ ...