数据交互 http请求 xhr

Posted 2020-10-17 周小猴儿

web浏览器通过http请求来获取服务器的数据或服务，http请求是一种无状态连接，用完即关闭，再用需重连接。这么设计能极大地减轻服务器压力。

 

HTTP请求：
　　一个http请求分为以下7个步骤：
　　1，建立TCP连接
　　2，浏览器向服务器发送请求命令
　　3，浏览器想服务器发送请求头信息
　　4，服务器响应
　　5，服务器发送响应头信息
　　6，服务器向浏览器发送数据
　　7，服务器关闭TCP连接

 

HTTP请求之请求request：
　　一个http请求一般由4个部分组成：
　　1，http请求的方法，常见的有get和post
　　2，请求的url
　　3，请求头信息，包括一些浏览器信息和用户身份信息等
　　4，请求体，即请求正文，包括一些用户的查询信息，表单信息等。请求头和请求体有一个空行来分开。

 

以下是一个请求体示例：

　　get方法，请求地址，协议版本
　　GET/login.php HTTP/1.1
　　以下是请求头信息
　　Host:localhost
　　Connecction:keep-alive
　　Accept:text/javascript,application/javascript,application/ecmascript,application/x-ecmascript;q=0.01
　　X-Requser-With:XMLHttpRequest
　　User-Agent:Mozilla/5.0(Windows NT 6.1)
　　Referer:http://www.baidu.com
　　Accept-Encoding:gzip,ddeflate,sdcn
　　Accept-Langauage:zh-CN,zh,q=0.8,en;q=0.6
　　// 空行断开请求头和请求体
　　以下是请求体信息
　　username=admin&pwd=123456

 

请求方法：
　　常见的请求方法有get和post，
　　get
　　　　一般用于信息获取
　　　　参数附加在url上，人人可见
　　　　参数大小有限制
　　post
　　　　一般用于修改服务器资源
　　　　参数打包发送，一般不可见
　　　　参数大小理论上无限制

 

HTTP请求之响应response：
　　一个http响应一般由3个部分组成：
　　1，状态码，告诉浏览器请求成功与否
　　2，响应头，和请求头一样，包含了一些环境信息，比如服务器类型，响应内容类型等
　　3，响应体，响应正文

 

以下是一个响应体示例：
　　状态码
　　HTTP/1.1 200 OK
　　响应头
　　Date:Sun,23 Now 2017 10:15:33 GMT
　　Server:Apache
　　Content-Encoding:gzip
　　Content-Length:8548484
　　Connecction:keep-alive
　　Content-Type:application/javascript
　　// 空行断开响应头和响应体
　　// 响应体
　　alert(‘test‘)

 

    //实例化xhr对象
    var xhr = new xmlHttpRequest()
    //载入请求open方法：请求方式，请求地址，是否异步
    xhr.open(method,url,asncy)
    //发送：get方法时，不用发送string或发送null，post则需要写入发送的数据。
    xhr.send(string)
        //eg.
        //get:
        xhr.open(‘GET‘,‘get.php‘,true)
        xhr.send()
        //post:
        xhr.open(‘POST‘,‘user.php‘,true)
        // post需要在请求头里指定发送数据的类型，下面是表单类型
        xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘)
        // send里填参数即可
        xhr.send(‘name=hhh&pwd=123456‘)
    //监听状态变化
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4&&xhr.status ===200){
            // 处理响应正文responseText，多数是json数据
            alert(xhr.responseText)
        }
    }

 

请求状态码：xhr.readyState
　　0 请求未初始化，open方法未调用
　　1 连接已建立，open已经调用，正在发送请求
　　2 请求已经接收了，即接收了请求头信息
　　3 解析 接收解析响应的内容
　　4 解析完成 浏览器可以使用返回来的数据了。

http状态码:xhr.status
　　1xx 信息类，表示已经收到了浏览器请求，正在处理
　　2xx 成功
　　3xx 重定向
　　4xx 客户端错误，比如可能发送了一个无效url
　　5xx 服务端错误

 

JSON
　　JSON是一个现在服务器和浏览器数据交互的常用格式，JSON数据可以简单地理解成没有方法的对象，不过其键需要用双引号包裹。JSON的本质是字符串，所以不能包含有JavaScript代码。
　　JSON的反序列化形式可以直接当成JavaScript对象使用，如.符号或[]访问属性
　　JSON的序列化形式就是一个字符串。
　　JSON.stringify(),JSON.parse()方法分别是用于JSON的序列化和反序列化

以下是一个JSON示例：

    {
        "nama":"zhouxiaohouer",
        "age":23,
        "data":[
            {
                "proid":112344,
                "proname":"小米6"
            },
            {
                "proid":112345,
                "proname":"小米7"
            }
        ]
    }