Ajax学习笔记（1）

最新推荐文章于 2024-09-27 09:39:47 发布

王小璐璐

最新推荐文章于 2024-09-27 09:39:47 发布

阅读量89

点赞数

文章标签： ajax 学习服务器

本文链接：https://blog.csdn.net/weixin_53170578/article/details/125250211

版权

（一）Ajax优缺点

优点：

1、不需要插件支持

2、不刷新页面就可获取可更新的数据

3、传递数据时按需发送

4、将服务器的一些操作转移到客户端

缺点：

1、前进后退功能被破坏

2、搜索引擎的支持度不够

3、存在跨域问题

（二）常见状态码

1.100~199：表示连接继续

2.200~299：表示各种意义上的成功

3.300~399：表示重定向

4.400~499：表示各种客户端错误

5.500~599：表示各种服务端错误

（三）Ajax实现过程

1.准备页面请求，创建XMLHttpRequest对象（Ajax的核心）

2.使用XMLHttpRequest对象的open()和send()方法发送资源请求给服务器

3.onreadystatechange函数（准备状态改变事件）,状态一改变就发送数据给客户端，使用XMLHttpRequest对象的reponseText或responseXML属性获得服务器的响应（即响应的值做局部刷新）

（四）get与post请求

//get请求： 
function sending() {
            //(一). 创建一个XMLHttprequest对象  
            var xhr = new XMLHttpRequest();
            //(二)调用open()方法打开连接
            //open()方法有三个参数
            //1.请求的method
            //2.请求的url
            //3.是否异步，默认值是true
            xhr.open('get', './01.php?id=1');
            //发送请求
            xhr.send();
            //(三).添加监听状态事件
            xhr.onreadystatechange = function () {
                //判断状态值 0-4五种状态 4代表最终的完成
                if (xhr.readyState === 4) {
                    //判断状态码
                    if (xhr.status === 200) {
                        var resp = JSON.parse(xhr.responseText);
                        console.log(resp);
                    }
                }
            }
        }

//post请求
 function sendmsg() {
            var xhr = new XMLHttpRequest()
            xhr.open('post', './data.php')
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send('name=zhangsan&age=18')
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var res = JSON.parse(xhr.responseText)
                        console.log(res);
                    }
                }
            }
        }