zoukankan      html  css  js  c++  java
  • Ajax

    一、Ajax
    1.异步请求技术
    2.使用场景:
    1、局部刷新、无需刷新整个页面
    2、主动请求数据、ajax只能得到数据、不能进 
    行转发或重定向
    3.使用ajax技术的环境
    ajax技术是由浏览器ajax引擎XMLHttpRequest对象发 
    起的异步请求。
    4.ajax使用步骤
    1.创建ajax引擎
    2.发起请求和提交方式、异步支持
    3.传递数据
    4.回调函数的接受
    5.状态码的判断
    //1.创建XMLHttpRequest对象 ajax引擎
    var xmlHttpRequest = null;
    if(window.XMLHttpRequest){//新版 
    本浏览器
    xmlHttpRequest = new 
    XMLHttpRequest();
    }else{//老版本IE浏览器
    xmlHttpRequest = new 
    ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.发起ajax请求 url method 
    true:异步 false:同步
    xmlHttpRequest.open 
    ("GET","checkName.do?username="+name,true);
    //3.发送数据 
    xmlHttpRequest.send(null);
    //4.回调函数 
    xmlHttpRequest.onreadystatechange 
    = function(){
    //5.成功状态的数据执行 
    4:响应结束 200:请求响应 成功
    if 
    (xmlHttpRequest.readyState == 4

    && xmlHttpRequest.status 
    == 200) {
    var data = 
    xmlHttpRequest.responseText;
    if(data == 
    "true"){

    span.innerHTML = "名字不可用";

    span.style.color = "red";
    }else if(data == 
    "false"){

    span.innerHTML = "名字可用";

    span.style.color = "green";
    }
    }
    }
    二、JQ对Ajax的封装
    1.$.load() 加载页面到指定区域
    2.$.ajax() 底层封装、原始数据参数更多
    $.ajax({
    "url":"checkName.do",//请 
    求的路径
    "type":"GET",//请求的方式

    "data":"username="+username,
    "dataType":"text",//响应 
    回的内容格式
    "async":false,//同步
    "timeout":5000,//等待时间
    "success":function(data){
    });
    3.$.post(url,{data},function(data){},"json")
    4.$.get(url,{data},function(data){},"json")
    5.$.getJSON(url,{data},function(data){})json数据
    6.$.getScript(url,{data});加载并运行js文件

  • 相关阅读:
    Java并发编程:synchronized
    对一致性Hash算法,Java代码实现的深入研究
    在Xcode中使用Git进行源码版本控制
    这些 Git 技能够你用一年了
    简明 Git 命令速查表
    Git 分支管理是一门艺术
    2016年Web前端面试题目汇总
    iOS 面试基础题目
    Json数据交互格式介绍和比较
    SpringBoot端口和访问路径
  • 原文地址:https://www.cnblogs.com/huangbo0502/p/11181114.html
Copyright © 2011-2022 走看看