ajax

一、什么是Ajax

Ajax (Asynchronous javascript and xml) 交互式网页应用开发技术,通过javascript的异步通信,从服务器获取XML文档(或者JSON文档)提取数据,再更新当前网页对应的部分,而不用刷新整个网页

二、基本概念

服务器端(后端):

             服务器端语言:php node java python  ruby Go

             数据库:mysql   mongodb sqllite

浏览器端(前端):

             HTML  CSS  Javascript  H5  IOS  Android  pc网页

前后端链接所用的协议:

            HTTP协议

           XMLHttpRequest对象

          TCP 

          UDP

ps:环信 融云(即时聊天开发)

三、获取Ajax的步骤

(1)  创建XMLHttpRequest对象,也就是创建一个异步调用对象

var xhr = new XMLHttpRequest();

(2)  创建一个新的HTTP请求,并指定该HTTP请求的方法(post/get) 、URL及验证信息

xhr.open('post','baseURL',true);   //验证信息true可以省略
或者
xhr.open('get','baseURL',true);

 设置头信息,让数据以不同的格式(content-type)传递给服务器

//告诉浏览器信息格式为form  ---  x-www-form-urlencoded

xhr.serRequestHeader("content-type","application/x-wwww-form-urlencoded")

//浏览器信息主体是序列化的JSON字符串
application/json

//XML格式个数据
text/xml

(3)  发送请求:具体要传什么数据告诉server

//有参数的传递(“ ”里面的为后端给的接口参数名)
xhr.send(" "username=" + UserName+ "&pwd=" + password ");
//无参传递
xhr.send();

(4)  设置状态监听函数

xhr.onreadystatechange = function () {
    if(xhr.readyState==4 && xhr.status == 200)
    {
        var res = JSON.parse(xhr.responseText);    //json解析完成后res为一个对象
        var str  = res.data;
        if(str=="登录成功")
        {

            window.location.href  = "DrpletService.html";
        }
        else
        {
            alert(str);
        }
    }
}








//readyState==4表示请求已经完成 xhr.status == 200表示数据已成功返回

我对 ajax 的理解是,它是一种异步通信的方法,通过直接由 js 脚本向服务器发起 http 通信,然 后根据服务器返回的数据,   更新网页的相应部分,而不用刷新整个页面的一种方法。 创建一个 ajax 有这样几个步骤:
    首先是创建一个 XMLHttpRequest 对象。  

    然后在这个对象上使用 open 方法创建一个 http 请求,open 方法所需要的参数是请求的方法、请 求的地址、是否异步和用户   的认证信息。      

   在发起请求前,我们可以为这个对象添加一些信息和监听函数。比如说我们可以通过 setRequestHeader 方法来为请求添加头信   息。我们还可以为这个对象添加一个状态监听函数。

   一个 XMLHttpRequest 对象一共有 5 个状态, 当它的状态变化时会触发on   readystatechange 事件,我们可以通过设置监听函数,来处理请求成功后的结果。

当对象的 readyState 变为 4 的时候,代表服务器返回的数据接收完成,这个时候我们可以通过判断请求的状态,如果状态是 2xx 或者 304 的 话则代表返回正常。这个时   候我们就可以通过 response 中的数据来对页面进行更新了。
    当对象的属性和监听函数设置完成后,后我们调用 sent 方法来向服务器发起请求,可以传入参数作 为发送的数据体。
 
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值