一、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. AngularJs ng-repeat指令中怎么实现含有自定义指令的动态html

    今天用angular写table的时候,遇到了一个问题.在ng-repeat中,含有动态的html,而这些html中含有自定义指令. 因为希望实现一个能够复用的table,所以定义了一个指令mySta ...

  2. 【排序算法】直接选择排序算法 Java实现

    基本思想 直接选择排序是从无序区选一个最小的元素直接放到有序区的最后. 初始状态:无序区为a[1...n],有序区为空. 第一次排序:在无序区a[1...n]中选出最小的记录a[k],将它与有序区的第 ...

  3. dedecms织梦自定义表单提交之后如何发送到邮箱!

    但是往往一些客户需要做一些提交信息到后台并发送到指定的邮箱. 一.直接打开plus下面的diy.php文件:  85行:$query = "INSERT INTO `{$diy->ta ...

  4. Spark_总结四

    Spark_总结四 1.Spark SQL     Spark SQL 和 Hive on Spark 两者的区别?         spark on hive:hive只是作为元数据存储的角色,解析 ...

  5. 如何用好消息推送为app拉新、留存、促活

    作为移动端APP产品运营最重要的运营手段,JPush消息推送被越来越多的APP厂商所重视,在信息泛滥的移动互联网时代,手机APP应用安装得越来越多,小小的手机屏幕每天收到的消息推送也越来越多,站在用户 ...

  6. 消除input，button之间的间距

    代码: 效果: 问题: input,button标签之间出现了间距,这并不是我们所期望的. 解决方法: 1.在父级元素上设置属性:font-size:0px; 将input父级字体(font-size ...

  7. Spring+SpringMVC+MyBatis+easyUI整合基础篇（七）JDBC url的连接参数

    在java程序与数据库连接的编程中,mysql jdbc url格式如下: jdbc:mysql://[host:port],[host:port].../[database][?参数名1][=参数值 ...

  8. MDX 用Ancestors得到Hierarchy中指定Level的值（附带SCOPE用法之一）

    需求:用户想要用Excel,对比每月预算和整年预算,需要在两个用户定义的Hierarchy都可以浏览.财年季月日(FYQMD)和财年月日(FYMD). 自定义hierarchy 属性关系(Attrib ...

  9. 版本管理工具 —— SVN

    想想我们在开发过程中是不是会遇到这样的情况: 今天写了很长的一段代码,觉得不合理,然后删了,第二天突然发现昨天的那段代码才是正确的,那怎么办,也无法撤销删除的代码? 还有团队中多人共同开发一个项目,如 ...

  10. [HDU1210] Eddy's 洗牌问题

    Problem Description Eddy是个ACMer,他不仅喜欢做ACM题,而且对于纸牌也有一定的研究,他在无聊时研究发现,如果他有2N张牌,编号为1,2,3..n,n+1,..2n.这也是 ...