浅析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的调用,只是在请求方式这块不用指定,原理一致!!

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

原文地址:https://www.cnblogs.com/why957/p/9066678.html

时间: 2024-10-10 19:04:26

浅析ajax原理与用法的相关文章

NSPredicate用法总结(Cocoa框架中的NSPredicate用于查询,原理和用法都类似于SQL中的where,作用相当于数据库的过滤取)

简述:Cocoa框架中的NSPredicate用于查询,原理和用法都类似于SQL中的where,作用相当于数据库的过滤取. 定义(最常用到的方法): [objc] view plaincopy NSPredicate *ca = [NSPredicate predicateWithFormat:(NSString *), ...]; Format:(1)比较运算符>,<,==,>=,<=,!=可用于数值及字符串例:@"number > 100" (2)范围

JavaScript之Ajax-1 Ajax(Ajax原理、Ajax对象属性和方法)

一.Ajax原理 Ajax简介 - Asynchronous JavaScript And Xml 异步的 JavaScript 和 Xml - Ajax 是一种用来改善用户体验的技术,其实质是,使用XMLHttpRequest对象异步地向服务器发送请求 - 服务器返回部分数据,而不是一个完整的页面,以页面无刷新的效果更改页面中的局部内容 Ajax工作原理 获取Ajax对象 二.Ajax对象属性和方法 异步对象的属性和方法 onreadystatechange - onreadystatecha

ajax原理总结附简单实例及其优点

在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 近有闲情,将之总结如下: [名称] Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 详情请移步Ajax: A New Approach to Web Applications [原理] 简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面

封装ajax原理

封装ajax原理 首先处理 用户如果不传某些参数,设置默认值 type默认get 默认url为当前页 默认async方式请求 data数据默认为{} 处理用户传进来的参数对象 遍历,拼接成key=value&key=value形式,加入数组 通过XMLHttpRequest对象创建xhr,早期的IE浏览器不支持XMLHttpRequest对象,通过var xhr = new ActiveXObject('Msxm12.XMLHTTP')创建 判断用户请求的方法 get:将数据拼接在url后面,

Ajax 原理过程 同步与异步区别 优缺点

ajax原理过程                                                                                                                                        利用XMLHttpRequest对象发送简单请求的基本步骤:1)创建XMLHttpRequest对象实例2)设定XMLHttpRequest对象的回调函数,利用onreadystatechange属性3)设定请求

[转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,

AJAX原理总结

AJAX全称 Asynchronous JavaScript and XML(异步的JavaScript 和XML) 同步和异步 异步传输是面向字符的传输,单位是字符 同步传输是面向比特,单位是帧,传输时要求接收方和发送方的时钟是保持一致的. 通过XMLHTTPRequest理解AJAX AJAX原理简单地说就是通过XMLHTTPRequest来向服务器发送异步请求,从服务器获得数据,然后用JavaScript来操作DOM而刷新页面. XMLHTTPRequest对象属性 ![XMLHTTPRe

epoll的原理和用法

(如果有谁想要这个软件的话,在评论中留一个邮箱吧.) 前几天好几次看到有朋友晒出玩2048刷高分的截图,我就想我能不能也做一个2048呢?仔细想了想2048游戏的规律,发现其实逻辑上很简单,也不用研究什么算法,于是我马上觉得我可以很快写出来.当天下午我就用了四个小时完成了2048的基本功能.几天后觉得不满足,于是给我的2048加了存档.读档和后退一步的功能,这样就更好刷分了呢! 使用语言:C#: 平台:Visual Studio 2012 Win Form. 如何完成2048的基本功能呢?204

最简单ajax,$.post()用法

最简单的ajax,$.post()用法 $.post("action.php",{'email':$('#email').val(),'address':$('#address').val()},function(data){ alert(data); } tips: 第一个参数:action.php,表示ajax的后台路径,也就是action地址. 第二个参数:向后台传递的参数,键值对的方式传递. 递三个参数:回掉函数,data为后台执行的返回结果. ajax有很多表现形式,$.aj