浅析ajax原理与用法

Posted 诚实善良小郎君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅析ajax原理与用法相关的知识,希望对你有一定的参考价值。

1 ajax原理

    Ajax(Asynchronous javascript and XML (异步的JavaScript和XML)),是一种快速创建
动态网页的技术,目的是显示动态局部刷新.通过XMLHttpResponse对象来向服务器发起异步请求,从服务器获取数据.
(1) 异步的javascript: 使用javaScript语言及功能向服务器发起请求,当服务器处理完请求之后,自动执行
javaScript回调函数.(客户端可以不需要等到服务器响应才能运行)
(2) XML是一种标记语言,是ajax与后台交互传输数据格式之一
(3) ajax只能向同源网站发起Http请求(端口,协议,域名都相同),跨域请求会报错

利用Ajax可以实现:
1 注册时,输入用户名自动检测该用户是否存在
2 登录时提示密码用户名错误
3 页面局部进行更新数据

2 XMLHttpResponse基本属性

(1) onreadystatechange  每次状态改变所触发事件的时间处理程序
(2) responseText  从服务器响应返回字符串形式数据
(3) responseXML   从服务器响应返回以XML(DOM兼容文档)数据对象
(4) response      从服务器返回对象:如json对象
(5) timeout  表示多少毫秒后,如果请求仍然没有得到结果,就会自动终止

附: response类型由XMLHttpRequest.responseType属性的值决定
    ‘‘:           字符串
    ‘document‘:   Document对象
    ‘json‘:       json对象
    ‘text‘:       字符串
    ‘blob‘:       Blob对象,适合读取二进制文件

var ajax = new XMLHttpRequest();
ajax.open(‘GET‘, ‘http://www.example.com/page.php‘, true);
var data = ajax.responseText;
data = JSON.parse(data);   将json字符串转json对象

var last=JSON.stringify(obj)   将json对象转字符串

3 ajax状态码

200, OK,访问正常
301, Moved Permanently,永久移动
302, Move temporarily,暂时移动
304, Not Modified,未修改
307, Temporary Redirect,暂时重定向
401, Unauthorized,未授权
403, Forbidden,禁止访问
404, Not Found,未发现指定网址
500, Internal Server Error,服务器发生错误

4 设置监听接口

onloadstart  请求发出
onprogress   正在发送和加载数据
onerror      请求失败
onload       请求成功完成
ontimeout    用户指定的时限到期,请求还未完成
onloadend    请求完成,不管成果或失败

5 原生javascript中ajax

{1}  同步ajax请求,get请求:

#定义一个触发函数fresh_code
function fresh_code() {
        let xhr = new XMLHttpRequest()
        xhr.open(‘get‘, ‘/api/v1/regist_code‘, false);  false代表同步,true代表异步请求
        xhr.send()
        let regist_code = xhr.responseText
        // 把注册码写到regist_code标签中
        let regist_code_span = document.getElementById(‘regist_code‘)
        regist_code_span.innerhtml = regist_code
    } 

{2}  异步ajax请求,get请求:

var xhr = new XMLHttpRequest();
// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function(){
  // 通信成功时,状态值为4,状态码为200
      if (xhr.readyState === 4 && xhr.status === 200) {
        //xhr.response指接收到的responseText字符串
          var data=JSON.parse(xhr.responseText);
          console.log(data)
    }
      else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
// open方式用于指定HTTP动词、请求的网址、是否异步
xhr.open(‘GET‘, ‘/endpoint‘, true);
// 发送HTTP请求
xhr.send(null);

{3}  同步ajax请求,post请求

var name = encodeURI("北京西");
var data = "username=" + name + "&password=123";
//调用send()函数
send(data);

function send(arg) {
  //调用创建对象函数
  CreateXMLHttpRequest();
  xmlhttp.onreadystatechange = callhandle;
  //get写法(请求方式,url,同步或异步)直接拼接到url,发送
  //xmlhttp.open("GET","Default.aspx?goback=yes&arg=" + arg,true);
  //post写法(请求方式,url,同步或异步),需要额外设置请求头
  xmlhttp.open("POST", "http://172.16.5.25:9011/dynamicStation/loginByAdmin", true);
  //用POST的时候一定要有这句
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");  
  xmlhttp.send(arg);
}

function CreateXMLHttpRequest() {
  #创建xmlhttp对象,进行判定
  if (window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
}

4 jquery中ajax

$.ajax({
    #请求方式
    type:‘get‘,
    url:‘/studentsinfo‘,
    #请求格式为json
    dataType:‘json‘,
    #处理函数
    success:function(data,status){
        console.log(data)
        var d=data[‘data‘]
        for(var i=0;i<d.length;i++){
            document.write(‘<p>‘+d[i][0]+‘</p>‘)
        }   
   }
})
也可以直接使用$get  或者  $post 基本类似ajax的调用,只是在请求方式这块不用指定,原理一致!!

今天就分享到这了,喜欢的小伙伴可以点下推荐哦!!非常感谢!!

以上是关于浅析ajax原理与用法的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript浅析ajax的使用

Ajax中的JSON格式与php传输过程的浅析

Spark CoreTaskScheduler源代码与任务提交原理浅析2

jquery之event与originalEvent的关系event事件对象用法浅析

websocket与ajax的区别浅析

浅析普通函数与构造函数