Ajax(l了解和异步交互)

最新推荐文章于 2023-02-08 09:00:00 发布

小梦新靓

最新推荐文章于 2023-02-08 09:00:00 发布

阅读量215

点赞数

分类专栏： js1

本文链接：https://blog.csdn.net/qq_43712187/article/details/97766055

版权

js1 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

初学者如有不对请指出谢谢

一、什么是Ajax?

ajax全称“Asynchronous Javascript And XML”，并不是一种新技术，是由javascript、xml、XMLHttpRequest组合在一起、能实现异步提交的功能，是一种创建交互式网页应用的网页开发技术。

同步和异步提交的区别(异步：通俗讲就是你让别让帮你干事情，你在这段时间可以做自己向做的事情)
同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。

异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来。

二、 Ajax能够干什么？

可以快速创建动态网页；
无需重新加载整个网页的情况下，能够更新部分网页；
提高用户的体验性；
Ajax工作原理（你让别人帮你办事情，你得先经过别人（服务器）同意才可以，别人说可以，你（浏览器）才可以把事情交代，最后服务器帮你干完了可不要给你交代一下，也就是给（浏览器）返回数据）

三、 Ajax步骤？

在这里讲的是表单提交的两种方式（post和get）其他还有delete和cunt想要扩展这些的自己百度

第一步创建Ajax对象
为什么创建Ajax对象？
（XMLHttpRequest。这是一个 JavaScript 对象，这是处理所有服务器通信的对象，通过 XMLHttpRequest对象与服务器进行对话的是 JavaScript 技术。这不是一般的应用程序流，这恰恰是 Ajax 的强大功能的来源。）
创建开始?(这里考虑到浏览器兼容问题)
创建一：

var xhr=null;
if(window.XMLHttpRequest)//高版本的建立
{
xhr=new XMLHttpRequest();//实例化
}
else{
xhr=new ActiveXobject('Mircrosoft')；//IE5,6版本
}

创建二：catch抛出异常后进行处理这是我c++学到的具体大概就是try有问题抛出问题后catch接受并进行处理（像具体了解自己百度）

try{
xhr=new  XMLHttpRequset;
}catch(e)
{
xhr=new ActiveXobject('Microsoft');
}

第二步：向服务器发送请求

xhr.open(参数一，参数二，参数三)；
参数一:请求类型’,
参数二:你要传送的地址url,对应的php路径
参数三;是否异步–异步就是true

//不识别中文要处理一下
如果是get的黄数据是一地址的方式进行传送的你交代的值是下面open的形式进行传送
var paraw='name='+name+'&number='+number1+'&pwd='+pwd+'&qq='+qq
xhr.open('get','php_07.php?'+encodeURI(paraw),true);//完成发送请求
xhr.send(null);//get时为nullsend（）的作用就是将这条请求发送给服务器
如果是post数据是通过send传送
xhr.open('POST','php_07.php',true);//完成发送请求
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//写在open和send之间作用是因为后台在处理时候给他进行了编码这个作用是为了还原原本样子
xhr.send(paraw);

第三步写回调函数

xhr.onreadystatechange=function()
{
   if(xhr.readyState==4)
    {
           if(xhr.status==200)
{
alert(xhr.responseText);
}
   }
}
xhr.responseText是后台返回的数据（echo后面的数据）还有代码i外面的值类似

后台代码

    <tr>
      <td><?php echo $_POST["userName"];?></td>
      <td><?php echo $_POST["gonghao"];?></td>
     <td><?php echo $_POST["shenfen"];?></td>
     <td><?php echo $_POST["mail"];?></td>
    </tr>

状态码

xhr.readyState=0;表示对象创建时的状态码
xhr.readyState=1;表示的是已经发送的请求
xhr.readyState=2;浏览器已经收到了服务器响应数据
=3正在解析请稍等
=4数据已经解析完成,你可以使用数据了表示的是服务器返回的数据可以使用,但是这个数据不一定正常
xhr.status==200表示的是服务器返回的数据正常,不是表示错误

查找状态码MDN web docs

四、最后小知识json

json类似维数组字符串类型（这纯属是自己理解）：JSON 语法是 JavaScript 对象表示法语法的子集。

书写格式：键值对
eg名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值："firstName" : "John"
对象可以包含多个名称/值对：
{ "firstName":"John" , "lastName":"Doe" }
json数组

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

这里我主要想说的是Json对象和Json字符串以及两个的转换
Json对象

var person={"name":"zhangsan","sex":"男","age":"24"}//json对象
alert(person.name);//zhangsan
alert(typeof person);//object

Json字符串字符串，我们常说的JavaScript中的字符串是单引号或者双引号引起来的。

var person='{"name":"zhangsan","sex":"男","age":"24"}';//json字符串
alert(person);//{"name":"zhangsan","sex":"男","age":"24"}
alert(typeof person);//string

为什么要说这个呢？在给数据交互的时候每个值都是对应的名称的类似就是name:lisi；这样如果直接把他转换成字符串的话你就根部不知道他
哪里到哪里是什么这时候json的作用就出来了
这两个可以相互转化，后台把你的值给他弄成json字符串你前台接受后在进行转换成Json对象利用对象的方式进行访问（方便吧）

var person='{"name":"zhangsan","sex":"男","age":"24"}';//json字符串
var personObject = JSON.parse(person);
alert(personObject.name);//zhangsan
var person={"name":"zhangsan","sex":"男","age":"24"};//json对象
var personString = JSON.stringify(person);
alert(personString);

将PHP对象转为Json数据

$arr1=array('name' => $name, 'number' => $number, 'pwd' => $pwd, 'qq' => $qq);
echo json_encode($arr1)
/关联数组
$arr2 = array("id" => 1, "name" => 'terry', "sex" => '男');
echo json_encode($arr2);
输出结果：{“id”:1,”name”:”terry”,”sex”:”\u7537″}

五、自己利用上面做的一个小功能（自己得配环境）

html代码:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        /*
         * 实现异步交互利用ajax  get/post请 
         * (1)给添加注册一个点击事件，点击一次交互一次
         * (2)实现异步交互的四部  对象创建   向服务器发送open （在传送的时候地址要将获取的值进行传送）  响应send  回调
         * （4）在回调中给下面的table添加一行表格并把传送的数据进行添加
         */
        $(function(){
            $('#btn').click(function(){//1添加事件
                var name=$('#name').val();
                var number1=$('#number').val();
                var pwd=$('#pwd').val();
               var qq=$('#qq').val();
                var xhr=null;//2、创建对象并设置兼容性
                if(window.XMLHttpRequest)
                {
                    xhr=new XMLHttpRequest;
                }
                else{
                    xhr=new ActiveXObject('Microsoft');
                }
            var paraw='name='+name+'&number='+number1+'&pwd='+pwd+'&qq='+qq
            xhr.open('POST','php_07.php',true);//完成发送请求
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
             //响应
             xhr.send(paraw);//get时为null
             xhr.onreadystatechange=function(){
                 if (xhr.readyState === 4) {
                     if (xhr.status === 200) {
                         response=JSON.parse(xhr.responseText)
var cce='<tr><td>'+response.name+'</td><td>'+response.number+'</td><td>'+response.pwd+'</td><td>'+response.qq+'</td><td>修改</td></tr>'
                    $('tbody').append(cce)
                     }
                 }
             }
             return false;
            });
       });
    </script>
    </head>
    <body>    
            <form action="" method="post">               
            名字：<input type="text" name='name' id='name' value="1"/><br />
            账号：<input type="text" name="number" id="number" value="2"/><br />
           邮箱: <input type="text" name="pwd" id="pwd" value="3"/><br />
           qq:  <input type="text" name='qq' id="qq" value="4"/><br />
            <input type="submit" name="" id="btn" value="添加" /><br />
            </form>
          <table border="1" cellpadding="30px" cellspacing="0">
               <thead>
                   <th>名字</th>
                   <th>账号</th>
                   <th>邮箱</th>
                   <th>qq</th>
                   <th>修改</th>
               </thead>
               <tbody id="tbody">                  
               </tbody>
          </table>
    </body>
</html>
php代码;
<?php
$name=$_POST['name'];
$number=$_POST['number'];
$pwd=$_POST['pwd'];
$qq=$_POST['qq'];
$arr1=array('name' => $name, 'number' => $number, 'pwd' => $pwd, 'qq' => $qq);
echo json_encode($arr1)
?>

小梦新靓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax(l了解和异步交互)

初学者如有不对请指出谢谢一、什么是Ajax?ajax全称“Asynchronous Javascript And XML”，并不是一种新技术，是由javascript、xml、XMLHttpRequest组合在一起、能实现异步提交的功能，是一种创建交互式网页应用的网页开发技术。同步和异步提交的区别(异步：通俗讲就是你让别让帮你干事情，你在这段时间可以做自己向做的事情)同步提交：当...
复制链接

扫一扫

专栏目录