首页 > 代码库 > AJAX

AJAX

 


定义

       Asynchronous Javascript And XML  异步JavaScript和XML
      一种创建交互式网页应用的网页开发技术
      一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
      注意

      AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术,AJAX本身也是基于JS代码实现功能的


用途

       使网页实现异步更新,可以使网页在不重新加载整个网页的情况下,对网页的某部分进行更新。 局部刷新)

 


使用
    原理 

        1 使用Javascript向服务器提出请求并处理响应

       2 Ajax 的核心是 JavaScript 对象 XMLHttpRequest,XMLHttpRequest使我们可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户
       3 程图示

              技术分享

 



    操作流程
      GET方式操作流程
          1 获取对象/创建请求对象 ------> var ajax = new XMLHttpRequest();
          2

           2.1 请求初始化

            2.1.1 让对象知道要以什么方式打开(加载)谁
            2.1.2 ajax.open(‘get‘,‘./1.php‘,true);  open(请求的方式,请求的文件,异步true/同步false)


           2.2 配置参数
            2.2.1ajax.open(‘get‘,‘./1.php?name=jack&age=18‘,true);


           3 正式发送请求 ----> ajax.send(); -------> 括号里可以写字符串,但仅限于使用POST方式时


           判断请求是否已响应,设置回调函数
           4.1判断请求是否已响应,并且告诉ajax请求成功后接下去该干啥


             4.2 ajax.onreadystatechange=function(){
                if(ajax.status==200 && ajax.readyState == 4){
                   alert(ajax.responseText);
               }
             }
                                   

              4.2.1 onreadystatechange
             4.2.1.1 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数
             4.2.1.2  readyState
               存有 XMLHttpRequest 的状态。从 0 到 4 发生变化    
                onreadystatechange 事件被触发 4 次,对应着 readyState 的每个变化
                        0: 请求未初始化
                1: 服务器连接已建立
                2: 请求已接收
                3: 请求处理中
                4: 请求已完成,且响应已就绪
                    

           4.3 status
              200---->"OK"
                404----->未找到页面

 


       POST方式操作流程
          1 获取对象/创建请求对象  var ajax = new XMLHttpRequest();
          2 请求初始化  

            让对象知道要以什么方式打开(加载)谁
            ajax.open(‘post‘,‘./1.php‘,true);  ------->   open(请求的方式,请求的文件,异步true/同步false)
          3
            3.1 设置请求头部信息  ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            3.2 正式发送请求  ajax.send(‘name=jack&age=18‘);  括号里可以写字符串作为POST请求的参数
            4 判断请求是否已响应,设置回调函数
            4.1 判断请求是否已响应,并且告诉ajax请求成功后接下去该干啥
            4.2 ajax.onreadystatechange=function(){
               if(ajax.status==200 && ajax.readyState == 4){
                  alert(ajax.responseText);
                  }
                }

 


  处理数组


    前端辅助函数  eval()  将字符串变成可以执行的代码


    后端辅助函数  php   json_encode($arr)  将数组转化为字符串格式,该字符串形式为json格式  {name: "jack", age: 18}


    注意
        ajax只有在服务器环境中才会看到效果
        ajax请求内传递的内容都是字符串格式的
        使用POST方式时,必须要设置添加POST的请求头
        get方式配置参数时,参数写在open()的URL内
        post方式配置参数时,参数写在send()的()内

AJAX