Java培训课程之ajax如何发送请求

发布时间:2019年08月23日作者:atguigu浏览次数:891

使用XmlHttpRequest对象发送请求

js中定义了一个可以发送异步请求的对象XMLHttpRequest。我们在网页中使用这个对象发送请求。我们来学习一下XmlHttpRequest对象。

1创建XMLHttpRequest对象

由于这个对象并不是标准,但是基本所有浏览器都支持,所以针对不同的浏览器我们需要创建其对应的对象。

 

1)w3c标准浏览器,火狐、谷歌等

var xhr = new XMLHttpRequest();

2)ie6创建方式

var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);

3)ie5.5创建方式

var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

所以为了兼容所有浏览器,我们可以创建一个公共的获取此对象的方法

//获取XMLHttpRequest的通用方法

function getXMLHttpRequest(){

   var xhr;

   try{

      //大部分浏览器都支持

      xhr = new XMLHttpRequest();

   }catch(e){

      try{

          //如果不支持,在这里捕获异常并且采用IE6支持的方式

          xhr = new ActiveXObject(“Msxml2.XMLHTTP”);

      }catch(e){

          //如果还不支持,在这里捕获异常并采用IE5支持的方式

          xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

      }

   }

   return xhr;

}

2使用XMLHttpRequest

  • open(method,url,async)

open()用于设置请求的基本信息,接收三个参数。

  • method

请求的方法:get或post

接收一个字符串

  • url

请求的地址,接收一个字符串

  • Assync

发送的请求是否为异步请求,接收一个布尔值。

true 是异步请求

false 不是异步请求(同步请求)

  • send(string)

send()用于将请求发送给服务器,可以接收一个参数

string参数

该参数只在发送post请求时需要。

string参数用于设置请求体

请求体参数使用键值对的形式,多个参数用&分割

如:“username=lll&password=lll”

  • setRequestHeader(header,value)

用于设置请求头

header参数

字符串类型,要设置的请求头的名字

value参数

字符串类型,要设置的请求头的值

                  post请求的时侯需要设置

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

 

3 XMLHttpRequest对象的属性:

1)readyState

描述XMLHttpRequest的状态

一共有五种状态分别对应了五个数字:

0 :请求尚未初始化,open()尚未被调用

1 :服务器连接已建立,send()尚未被调用

2 :请求已接收,服务器尚未响应

3 :请求已处理,正在接收服务器发送的响应

4 :请求已处理完毕,且响应已就绪。

2)status

请求的响应码

200 响应成功

404 页面为找到

500 服务器内部错误

… … … …

3)onreadystatechange

该属性需要指向一个函数

该函数会在readyState属性发生改变时被调用

4)responseText

获得字符串形式的响应数据。

5)responseXML(用的比较少)

获得 XML 形式的响应数据。

 

4使用js发送ajax请求示例

1)发送get请求:

//获取xhr对象

var xhr = getXMLHttpRequest();

//设置请求信息

xhr.open(“get”,”AjaxServlet?&t=”+Math.random(),true);

//发送请求

xhr.send();

//监听请求状态

xhr.onreadystatechange = function(){

//当响应完成

   if(xhr.readyState == 4){

      //且状态码为200时

      if(xhr.status == 200){

          //接收响应信息(文本形式)

          var text = xhr.responseText;

          //弹出消息

         alert(text);

      }

   };

};

 

2)发送post请求

//获取xhr对象

var xhr = getXMLHttpRequest();

//设置请求信息

xhr.open(“post”,”2.jsp”,true);

//设置请求头

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

//发送请求

xhr.send(“hello=123456”);

//监听请求状态

xhr.onreadystatechange = function(){

//当响应完成

if(xhr.readyState == 4){

   //且状态码为200时

   if(xhr.status == 200){

      //接收响应信息(文本形式)

      var text = xhr.responseText;

      //弹出消息

      alert(text);

   }

};

 


上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训 UI/UE设计培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)