一、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. mac环境下mentohust锐捷登录配置

    今天测试react native嵌入原生项目,账号流量恰好用完,想换同学账号却不会更改配置,以至于被网络弄得头疼了一中午.于是,好好研究了一下这个mentohust 一.需要下载的文件 我已经全部整理 ...

  2. 在.NET Core控制台应用程序中使用强类型配置

    想象一下,你写一个控制台应用程序,你想要从配置文件中以强类型方式读取配置. .NET Core 可以帮助我们解决. 通常我会在ASP.NET Core MVC中演示,但简单起见,只在控制台应用程序中演 ...

  3. Javascript学习十

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  4. 用JavaScript实现图片剪切效果

    学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...

  5. iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  6. Raft算法，从学习到忘记

    Raft算法,从学习到忘记 --Raft算法阅读笔记. --Github 概述 说到分布式一致性算法,可能大多数人的第一反应是paxos算法.但是paxos算法一直以来都被认为是难以理解,难以实现.S ...

  7. 百度推送-sitemap-使用playframework框架实现-java

    主动推送的目的是能够把我们高质量内容推送给百度,但是首先你得有一个属于你自己的网站,在百度站长进行验证通过之后,才有资格推送百度sitemap. 百度站长平台为未使用百度统计的站点提供三种验证方式:文 ...

  8. rgba兼容性处理

    根据caniuse(http://caniuse.com/#search=rgba),rgba兼容性为IE9以及以上浏览器. 实例代码: <!doctype html> <html ...

  9. 一个想法照进现实-《IT连》创业项目：关于团队组建

    前言: 从上一篇<三天的风投对接活动内幕分享>归来后,从中领悟了不少内涵. 之后暂停了找钱的想法,这些天也拒绝了不少想要参与众筹的同学. 目前主要精力放在以下三件事: 1:重新规划顶层设计 ...

  10. 微信公众号java开发思路

    方法一:不开启开发模式,直接在自定义菜单中跳转到网页,适用于流量较小的公众号.   方法二:开启开发者模式,关闭自带的自定义菜单和消息回复,接入自己开发的应用           1.接入校验:创建s ...