AJAX请求数据的步骤

作者: 悟空弜厸 | 来源:发表于2017-04-13 12:45 被阅读137次

1.第一步:创建异步对象

var xhr=new XMLHttpRequest ();//创建一个异步对象。
//=======//
//上面创建异步对象的方法非IE浏览器都支持。IE7以上也支持。

2.第二步:创建http请求(只是打开和url的连接,并不会发送请求。)

 var xhr=new XMLHttpRequest();    
 xhr.open("get","http://api.jisuapi.com/express/query","true");
    //参数一:发送请求的方式:方式分别有post和get
    //参数二:请求地址
    //参数三:是否是异步提交true:异步,flase:同步提交
    //=======//
    //如果使用post请求需要为post请求设置一个请求头(必须在发送数据之前)设置方法如下:
    //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

3.第三步:发送数据(get和post发送数据的方式不相同)

var xhr=new XMLHttpRequest ();//创建一个异步对象。
    xhr.open("get","http://api.jisuapi.com/express/query?name=zhangsan","true");
//在发送数据上需要注意的是get和post的发送方式
//get:数据需要拼接到open方法里面的URL地址里格式为URL?数据。(注意:get方式也还是需要调用send方法如不调用数据将不会发送)
//post:数据直接写到send方法里即可如下:
  //  xhr.send("name=zhangsan");

4.第四步:设置监听请求状态的回调函数

请求状态分为5步:
0.未初始化:异步对象创建出来但是还没有打开连接,(即未调用open方法)
1.已初始化:异步对象已经创建并且打开了连接(调用了open方法),但是还没有发送请求(未调用end方法)
2.已发送数据:已经调用了send方法,但web服务器响应还未返回
3.正在接收:web服务器接收完数据并且处理完毕后,向客户端发送响应结果
4.接收完毕:当web服务器响应的数据全部接收完毕

以上序号对应readyState的值

var xhr=new XMLHttpRequest ();//创建一个异步对象。
    xhr.open("get","http://api.jisuapi.com/express/query","true");
    //下面的回调函数是会动态监听请求状态
    xhr.onreadystatechange=function(){
        //readyState属性会记录下5种请求状态
        if(xhr.readyState == 4){
            alert("web服务器响应的数据全部接收完毕")
        }
    }

相关文章

  • ajax

    Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...

  • ajax请求接口参数

    如何使用ajax请求数据: // 请求接口数据$.ajax({ url: 'http://localhost/...

  • JavaScript知识点梳理

    前端基础知识梳理 JavaScript部分 1.AJAX请求数据的步骤是什么?传输的数据是用的暗文还是明文? 步骤...

  • AJAX请求数据的步骤

    1.第一步:创建异步对象 2.第二步:创建http请求(只是打开和url的连接,并不会发送请求。) 3.第三步:发...

  • ajax

    特点 ajax ajax入门 ajax请求与发送数据 ajax工具类封装 type:请求类型url:请求地址dat...

  • 2018-01-27

    ajax的步骤 1.index.jsp直接发送ajax请求。 2.服务器将查出的数据以json格式返回给浏览器。 ...

  • 004_Ajax实现HTML局部更新

    Ajax 步骤 1.搭建HTML骨架2.书写js骨架3.书写Ajax代码、对异步请求到的数据进行处理 详解 1.搭...

  • AJAX 请求步骤

    AJAX 是什么 ajax 是一种异步请求数据的技术,对于提高用户体验度和程序性能有很大的帮助。 AJAX 请求步...

  • 自定义_ajax 两种方式

    一、用原生来写ajax 请求GET 请求POST 二、用ifarme来写 用ajax的时候,整体的请求步骤是1.向...

  • ajax与jsonp、jsonp

    轮播图 json 数据格式 ajax与jsonp ajax是获取数据的 get请求 post请求 url:"js/...

网友评论

    本文标题:AJAX请求数据的步骤

    本文链接:https://www.haomeiwen.com/subject/gxcbattx.html