文档章节

Ajax2

CarlDing
 CarlDing
发布于 2016/05/23 11:02
字数 688
阅读 46
收藏 2

1:Ajax

      异步的JS

      组成: XHR,JS,   XML,CSS

 

2:如何创建XHR对象

IE/其他的浏览器

 

 

2:异步同步

 

 

异步的情况:

   function _get() {

//1:声明访问的地址

var dd = new Date();

var url = "/20160515/random?"+dd.getTime();

//2:设置如何访问这个url

xhr.open("GET", url, true);//默认值就是异步

//3:注册服务器成功以后的回调函数

//

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {//判断是否接收到了数据

alert("2:接收数据完成了")

//判断服务器的状态

if (xhr.status == 200) {

//如果数据成功,就返回

var txt = xhr.responseText;

document.getElementsByName("random")[0].value = txt;

} else {

alert("失败:" + xhr.status);

}

}

};

//4:开始请求数据

xhr.send();

alert("1:请求发送完成了.如果这儿先执行,即没有以阻塞的方式运行。");

 

同步的情况:

function _get() {

//1:声明访问的地址

var dd = new Date();

var url = "/20160515/random?"+dd.getTime();

//2:设置如何访问这个url

xhr.open("GET", url, false);//默认值就是异步

//3:注册服务器成功以后的回调函数

//

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {//判断是否接收到了数据

alert("1:接收数据完成了")

//判断服务器的状态

if (xhr.status == 200) {

//如果数据成功,就返回

var txt = xhr.responseText;

document.getElementsByName("random")[0].value = txt;

} else {

alert("失败:" + xhr.status);

}

}

};

//4:开始请求数据

xhr.send();

alert("2:请求发送完成了.如果这儿先执行,即没有以阻塞的方式运行。");

}

 

 

3:xhr对象的方法

open

创建一个新的http请求,并指定此请求的方法、URL以及验证信息

语法

oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync);

bstrMethod : get | post

 

 

send

发送请求到http服务器并接收回应 

 

  向服务器发送请求。

 

Get : xhr.send();

Post : xhr.send(name=Jack&age=34“);

 

 

 

setRequestHeader

单独指定请求的某个http头

如果你的请示是 post方式

则必须要设置请求头为:

   xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);

 

 

 

属性:

   responseText

将响应信息作为字符串返回

语法

strValue = oXMLHttpRequest.responseText;

 

用于获取服务器返回的 out.print(......);

 

4:用get方式向服务器发送请求+参数

思想:参数都在url的后面即:

   Http://ip:port/project/resource?name=Jack&age=89

 

var nm = document.getElementsByName("name")[0].value;

//如果有中文必须要对中文进行编码

nm = encodeURI(nm);

var parm = "name="+nm+"&age=90";

//1:声明访问的地址

var dd = new Date();

var url = "/20160515/random?"+dd.getTime()+"&"+param;

alert(url);

 

 

5:向服务器发送post请求

  1:open(POST,...);

  2:设置请求头:xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);

  3:请求的数据 在send(name=uuu&age=999);

 

function _post() {

var nm = document.getElementsByName("name")[0].value;

var param = "name=" + nm + "&age=87";

param = encodeURI(param);

xhr.open("POST", "random", true);

xhr.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

var txt = xhr.responseText;

alert("txt is:" + txt);

 

}

}

};

xhr.send(param);

}

 

 

 

 

6: 将验证码的验证用ajax来实现,用户名是否重复

可以创建一个公共的JS文件,里面直接创建xhr对象。

 

 

导入:

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7:安装插件:

 

Aptana

 

 

Jboss:

 

 

 

 

 

 

© 著作权归作者所有

CarlDing
粉丝 5
博文 106
码字总数 78103
作品 0
济南
其他
私信 提问
关于struts2一个action配置内,ajax访问内部指定的某个方法

问题:我项目有一个action,是专问用来处理ajax请求的。 public String ajax1(){ return "ajax1"; } public String ajax2(){ return "ajax2"; } public String ajax3(){ return "ajax3"; } .......

lijegd
2014/03/16
1K
3
手把手教你使用ts 一步一步的去完成一个Promise

前奏 笔者公司前端小组,线上出现了因为Promise用错了而导致的问题。 本文的出发点不仅是了解Promise,主要目的是跟着特性去写一个Promise。 所以前提是你已经掌握了Promise的基本特性,如果...

呼啸而过的明天
06/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

没有更多内容

Knowage 6.2安装部署

注意:需要正确配置JAVA_HOME和JRE_HOME还有catalina_home,否则启动的时候tomcat一闪而过,想要获得报错信息,可以打开cmd,在dos命令行运行开始命令 官网:https://www.knowage-suite.com/s...

阿伦哥-
26分钟前
5
0
c++11 左值引用和右值引用

#include <iostream>using namespace std;void Print(string& s){ cout << s;}int main(){ string s="abc"; Print(s); // OK Print("abc"); // parse error......

SibylY
28分钟前
5
0
浅谈Facade外观模式

一、前言 外观模式是一种非常简单的模式,简单到我们经常都会使用,比如对于类A和B,如果两者需要交互,经过一定的处理过程才能实现某一个具体的功能,那么我们可以将这个处理的过程定义为一...

青衣霓裳
29分钟前
5
0
AnalyticDB for PostgreSQL 6.0 新特性介绍

阿里云 AnalyticDB for PostgreSQL 为采用MPP架构的分布式集群数据库,完备支持SQL 2003,部分兼容Oracle语法,支持PL/SQL存储过程,触发器,支持标准数据库事务ACID。ADB PG通过行存储、列存...

Mr_zebra
31分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部