JavaScript 中ajax

ajax

前言：

常见Windows命令：

• windows+E 打开文件资源管理
• Windows+D 回到桌面
• ctrl+alt+. ctrl+alt+delete 打开任务管理器
• windows+R 打开运行界面 cmd—>打开命令行工具
• ctral+A ctrl+C ctrl+V ctrl+Z ctrl +S

常见dos命令：

• cd 地址 切换目录
• dir 查看当前目录下所有文件
• cls 清屏
• exit 退出
• ipconfig 查看本机IP地址
• node 文件名 部署服务器

一、ajax的概念

异步和同步：

• 同步：浏览器在请求数据的过程中，会一直等待事件的响应，直到返回结果才会执行其他的操作。
• 异步：浏览器在请求数据的过程中，不会一直等待，这段时间还可以做其他的操作

ajax是一种能够完成前后端数据交换的技术

局部刷新技术

请求地址： 协议:主机名:端口号/资源地址?查询参数#哈希

例如：http://localhost:3000 或 http://127.0.0.1:3000

二、使用ajax

简单的ajax请求：

            var xhr=new XMLHttpRequest();//创建对象
            xhr.open("GET","http://127.0.0.1:3000");//配置
            //监听事件
            xhr.onreadystatechange=function(){
                if(this.readyState==4&&this.status==200){
                    // console.log(this.responseText);
                    document.querySelector('div').innerHTML=this.responseText;
                }
            };
            xhr.send();//发送请求

ajax的核心请求对象：XMLHttpRequest

1.方法：

• open(method,url) 配置请求对象
  • method
    • get
    • post
  • url: 服务器地址
• send(params) 向后台发送请求
  • params post请求的参数

2.事件：

• onreadstatechange 当readyState状态发生改变的时候，就会触发这个事件

3.属性

• readyState XMLHttpRequest(请求)对象的状态
  • 1
  • 2
  • 3
  • 4 接收到后台响应，后台响应的数据解析完毕
• responseText 后台响应的 数据(文本格式)
• responseXML 后台响应给前端的数据(XML格式)
• status http状态码 200 （成功） 404 500

4.ajax请求方式：

• GET
  • 有参数时，需要将参数拼接到地址后面，例如：http://localhost:3000?key=value&key1=value1
• POST
  • 有参数时，需要将参数通过请求体发送

示例1：get请求登录

        //登录功能
        function login(name, pwd) {
            var xhr = new XMLHttpRequest();//创建对象
            xhr.open("GET", 'http://localhost:9005?username=' + name + '&password=' + pwd);
            xhr.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    //{"code":20,"msg":"登陆成功","username":"admin"}                    
                    // {"code":40,"msg":"用户名或密码有误"}
                    var obj = JSON.parse(this.responseText);//将json字符串---->对象
                    console.log(obj);                    
                }
            };
            xhr.send();
        }

示例2：post 请求登录

        function postLogin(name, pwd) {
            var prams = "username=" + name + "&pwd=" + pwd;//请求参数
            var xhr = new XMLHttpRequest();
            xhr.open("POST", 'http://localhost:5000');
            xhr.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    // console.log(this.responseText);
                    var obj=JSON.parse(this.responseText);
                    console.log(obj);
                }
            };
            xhr.send(prams);//请求体 中发送数据
        }

GET和POST请求的区别：

• 有参数时，get请求需要将参数拼接到请求地址中，post请求在请求体中发送
• 安全性不一样，post更加安全。…
• 能够传输的数据大小不一样。GET请求由于需要在地址后面拼接提交给服务器的数据，对传输数据的大小是有要求的，最大2K。post是在请求体中发送数据，理论上，没有上限。

5.数据解析

常见的数据格式：

• 普通文本 字符串
• json格式 字符串 注意：json字符串中的key必须使用双引号包裹
  • json数组 [{key:value,key:vaue}]
  • json对象 {“key”:value,“key”:value}
• xml格式

6. JSON对象

• parse() 将json字符串转换为对象格式
• stringify() 能够将对象转换为json字符串

7.ajax封装

使用回调函数，解决异步传参问题。

/*
    method  请求方式 get/post
    url:    服务器地址
    fn :    回调函数
    data:   请求参数
*/
function ajax(method, url,fn, data) {
    var xhr = new XMLHttpRequest();//创建对象
    if (method == "get" && data != undefined) {//get 携带参数
        url = url + "?" + data;
    }
    xhr.open(method, url);
    xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            // console.log(this.responseText);//打印后台数据
            // return this.responseText;
            fn(this.responseText);//将后台数据作为参数传递给函数
        }
    };
    if (method == 'post' && data != undefined) {
        xhr.send(data);//post有参数
    } else {
        xhr.send();//发送
    }
}