一、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. Radis安装

    基本知识 1.Redis的数据类型: 字符串.列表(lists).集合(sets).有序集合(sorts sets).哈希表(hashs) 2.Redis和memcache相比的独特之处: (1)re ...

  2. iOS异步处理

    有过编程经验的人,基本都会接触到多线程这块. 在java中以及Android开发中,大量的后台运行,异步消息队列,基本都是运用了多线程来实现. 同样在,在ios移动开发和Android基本是很类似的一 ...

  3. 第三方库AFNetworking 3.1.0的简单使用

    AFNetworking是一个 在iOS开发中 使用非常多网络开源库.它是一个轻量级的网络请求API类库. 适用于iOS以及Mac OS X.它构建于在(Apple iOS开发文档) NSURLCon ...

  4. 【struts2】ActionContext与ServletActionContext

    1 再探ActionContext 我们知道,ActionContext是Action执行时的上下文,里面存放着Action在执行时需要用到的对象,也称之为广义值栈.Struts2在每次执行Actio ...

  5. RabbitMQ(从安装到使用)

    RabbitMQ 一,RabbitMQ简单介绍: RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Messa ...

  6. SmartRoute之大规模消息转发集群实现

    消息转发的应用场景在现实中的应用非常普遍,我们常用的IM工具也是其中之一:现有很多云平台也提供了这种基础服务,可以让APP更容易集成相关功能而不必投入相应的开发成本.对于实现这样一个简单功能并不复杂, ...

  7. JS入门（二）

    关于运算符: js中判断运算符跟数学的运算符基本差不多,就是大于>,小于<,大于等于>=,小于等于<=,等于==,不等于!=,全等于===:可以看出来,跟我们印象中的判断运算符 ...

  8. [hdu2156]分数矩阵

    Problem Description 我们定义如下矩阵:1/1 1/2 1/31/2 1/1 1/21/3 1/2 1/1矩阵对角线上的元素始终是1/1,对角线两边分数的分母逐个递增.请求出这个矩阵 ...

  9. Robot Framework自动化测试环境部署

    文档版本:v1.0 作者:令狐冲 如有问题请发邮件到:1146009864@qq.com 使用Robot Framework框架(以下简称RF)来做自动化测试. 模块化设计 1.所需环境一览表 软件 ...

  10. Rotate Array leetcode

    Rotate an array of n elements to the right by k steps. For example, with n = 7 and k = 3, the array  ...