一、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. html5 新特性

    1.querySelector 返回文档中匹配指定css选择器的一个元素. 注意:uerySelector() 方法仅仅返回匹配指定选择器的第一个元素 如果你需要返回所有的元素,请使用 querySe ...

  2. 撸基础篇系列，JAVA的NIO部分

    前言:撸基础篇系列,避免每次都要从头开始看,写个自己的知识体系树 NIO 核心就是异步, 比如,复制文件,让操作系统去处理,等通知 BIO核心类 一,BIO NIO基本操作类 Bytebuffer 构 ...

  3. C++ 11和C++98相比有哪些新特性

    此文是如下博文的翻译: https://herbsutter.com/elements-of-modern-c-style/ C++11标准提供了许多有用的新特性.这篇文章特别针对使C++11和C++ ...

  4. 用smarty模板做数据实现修改、分页等功能

    先来看怎么把数据库的列表全都显示出来 还是要先建一个php文件,还有html文件,都存到相应的目录下 php文件中 <?php include("../init.inc.php&quo ...

  5. java 线程中断机制

    上一篇文章我们了解过了java有关线程的基本概念,有线程的属性,线程可能处于的状态,还有线程的两种创建的方式,最后还说了一个关键字synchronized,解决了高并发导致数据内容不一致问题,本篇文章 ...

  6. C#泛型编程

    1.泛型的概念     C#中的泛型与C++中的模板类似,泛型是实例化过程中提供的类型或类建立的.泛型并不限于类,还可以创建泛型接口.泛型方法,甚至泛型委托.这将极大提高代码的灵活性,正确使用泛型可以 ...

  7. TuSDK 简易使用方法 持有图片对象方式

    TuSDK 为涂图照相应用的SDK,打包后文件大小约为5M,缺点为包比较大,且图片清晰度较差一些,优点为直接可以引用滤镜贴纸,方便易用.   使用方法如下:    1.AppDelegate.m 中加 ...

  8. 九度OJ题目1080：进制转换（java）使用BigInteger进行进制转换

    题目描述: 将M进制的数X转换为N进制的数输出. 输入: 输入的第一行包括两个整数:M和N(2<=M,N<=36). 下面的一行输入一个数X,X是M进制的数,现在要求你将M进制的数X转换成 ...

  9. 浅谈jquery插件开发模式

    首先根据<jQuery高级编程>的描述来看,jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget ...

  10. TSQL语句和CRUD（20161016）

    上午 TSQL语句 1.创建数据库 create database test2; 2.删除数据库 drop database test2; 3.创建表 create table ceshi ( ids ...