开发者社区> 蓝色の流星VIP> 正文

浅析ajax原理与用法

简介: 浅析ajax原理与用法 1 ajax原理 Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建动态网页的技术,目的 是显示动态局部刷新.
+关注继续查看

浅析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 ajax解析

  • 第一步,创建ajax对象

    • 高级浏览器,包括火狐、chrome、opera,ie7以上
    var xhr = new XMLHttpRequest();
    • 使用XMLHttpRequest对象的open创建请求
    /*参数说明:
    method:该参数用于指定HTTP的请求方法,一共有get、post、head、put、delete五种方法
          ,常用的方法为get和post。
    URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。
       该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php(在传回响应之前,能够在服务器上执行任务)。
    flag:该参数为可选参数,参数值为布尔型。该参数用于指定是否使用异步方式。
        true表示异步方式、false表示同步方式,默认为true。
    name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。
    password:该参数为可选参数,用于输入密码。
    XMLHttpRequest.open(method,URL,flag,name,password);
    
    //例
    xhr.open('get','2.py?username=tom&pwd=123');
    • 如果是get请求,参数需要附加到url里
  • 第三步,发送请求

    • 如果是get请求,send参数可以为空;
    • 如果为post请求,参数必须在send参数中传递,参数格式和url中设置的一样
    • 如果为post方式需要在send前,设置请求头信息:xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)
    //get方式
    xhr.send(null);
    
    //post方式
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.send('username=tom&pwd=123');
  • 第四步,监听Ajax状态变化
    向服务器发送请求的目的是为了获得服务器端的数据,要获得服务器端返回的数据,需要监听XMLHttpRequest的状态,每当XMLHttpRequest状态发生改变时,会触发事件onreadystatechange,我们可以编写onreadystatechange事件处理函数,获取服务器返回的数据。

    • XMLHttpRequest对象的状态,可以通过属性readyState获取,公有以下5种状态:
    • 0: 请求未初始化
    • 1: 服务器连接已建立
    • 2: 请求已接收
    • 3: 请求处理中
    • 4: 请求已完成,且响应已就绪
    • 当readyState值为4时,就可以获取返回数据了,但返回的数据是成功还是失败,需要根据http的状态码确定,XMLHttpRequest的status属性用于判断http的状态,200表示访问成功
    xhr.onreadystatechange = function () {
        if (4 == xhr.readyState) {
            if (200 == xhr.status ) {
                alert(xhr.responseText);
            }
        }
    };
  • 第五步,获取响应数据

    • 可以通过XMLHttpRequest对象的responseText获取数据,现在已经不再使用responseXML获取数据了
    • 客户端获取json数据
    xhr.onreadystatechange = function () {
    if (4 == this.readyState && 200 == this.status) {
        //1.通过eval将json字符串转换为对象 
       // var obj = eval('('+xhr.responseText+')');
       // console.log(obj);
    
       //2 使用json.parse将json字符串转换为对象
       obj = JSON.parse(this.responseText);
       console.log(obj);
    }
    };
    • JSON字符串和JSON对象的转换
    //json字符串 ==> json对象
    var obj = JSON.parse(json字符串);
    
    //或者
    var obj = eval('(' + json字符串 + ')');
    
    //json对象转json串
    var str=obj.toJSONString();
    //或
    var str=JSON.stringify(obj); 

6 原生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;
  //xmlhttp.open("GET","Default.aspx?goback=yes&arg=" + arg,true);
  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() {
  if (window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
}

7 jquery中ajax

$.ajax({
    type:'get',
    url:'/studentsinfo',
    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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14247 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
28748 0
Javascript数组常用方法[包含MS AJAX.NET的prototype扩展方法]示例
看了JefferyZhao的MSDN web cast视频教程,亲自实践了一下,代码如下: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.
661 0
浅析ajax原理与用法
浅析ajax原理与用法 1 ajax原理 Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建动态网页的技术,目的 是显示动态局部刷新.
1231 0
MVC3中Ajax.ActionLink用法
首先加载如下代码: @Ajax.ActionLink("删除", "Delete", "User", new { id = item.UserCode }, new AjaxOptions() { UpdateTargetId = "strcontent", HttpMet...
782 0
DJANGO中,用QJUERY的AJAX的json返回中文乱码的解决办法
和网上其它用JAVA或是PHP的实现不太一样, DJANGO中的解决办法如下: 后端样例: def render_to_json_response(context, **response_kwargs): data = json.
1053 0
不用AJAX实现前台JS调用后台C#方法(小技巧)
纯属小技巧,高手见笑了。一提到如何在前台JS调用后台C#方法,AJAX成为了必然的想法。只是实现的细节采用AJAX 1.0或者AjaxPro的区别。其实如果不用AJAX,我们也能够很方便地利用JS调用后台方法。
797 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20518 0
66
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载