zoukankan      html  css  js  c++  java
  • HTTP服务&AJAX编程

    即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用。

    本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

    传统方式我们是以表单形式与服务器通信的。

    1.1   异步

    指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步。

    其优势在于不阻塞程序的执行,从而提升整体执行效率。

                           

    现实生活中的一个例子

    打电话时同步 发消息是异步

    XMLHttpRequest可以以异步方式的处理程序。

    1.2   XMLHttpRequest

    浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面。

    下面是一个简单的例子

    由于XMLHttpRequest本质基于HTTP协议实现通信,所以结合HTTP协议和上面的例子我们分析得出如下结果:

    1.2.1    请求

    HTTP请求3个组成部分与XMLHttpRequest方法的对应关系

    1、请求行

    2、请求头

    get请求可以不设置

    3、请求主体

    注意书写顺序

    1.2.2    响应

    HTTP响应是由服务端发出的,作为客户端更应关心的是响应的结果。

    HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。

    由于服务器做出响应需要时间(比如网速慢等原因),所以我们需要监听服务器响应的状态,然后才能进行处理。

    onreadystatechangeJavascript的事件的一种,其意义在于监听XMLHttpRequest的状态

    1、获取状态行(包括状态码&状态信息)

    2、获取响应头

    3、响应主体

    我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML

    1.2.3    API详解

    xhr.open() 发起请求,可以是get、post方式

    xhr.setRequestHeader() 设置请求头

    xhr.send() 发送请求主体get方式使用xhr.send(null)

    xhr.onreadystatechange = function () {} 监听响应状态

    xhr.readyState = 0时,UNSENT open尚未调用

    xhr.readyState = 1时,OPENED open已调用

    xhr.readyState = 2时,HEADERS_RECEIVED 接收到头信息

    xhr.readyState = 3时,LOADING 接收到响应主体

    xhr.readyState = 4时,DONE 响应完成

    不用记忆状态,只需要了解有状态变化这个概念

    xhr.status表示响应码,如200

    xhr.statusText表示响应信息,如OK

    xhr.getAllResponseHeaders() 获取全部响应头信息

    xhr.getResponseHeader('key') 获取指定头信息

    xhr.responseText、xhr.responseXML都表示响应主体

    注:GETPOST请求方式的差异(面试题)

    1、GET没有请求主体,使用xhr.send(null)

    2、GET可以通过在请求URL上添加请求参数

    3、POST可以通过xhr.send('name=itcast&age=10')

    4、POST需要设置

    5、GET效率更好(应用多)

    6、GET大小限制约4K,POST则没有限制

    问题?如何获取复杂数据呢?

    1.2.4    XMLHttpRequest2.0

    技术总是在实践中不断更新的,XMLHttpRequest也不例外

    1、可以设置超时

    2、支持FormData对象管理表单数据

    3、支持二进制(文件上传)

    4、支持上传进度

    1.3   JSON

    即 JavaScript Object Notation,另一种轻量级的文本数据交换格式,独立于语言。

    1.3.1    语法规则

    1、数据在名称/值对中

    2、数据由逗号分隔(最后一个健/值对不能带逗号)

    3、花括号保存对象方括号保存数组

    4、必须要使用双引号

    1.3.2    JSON解析

    JSON数据在不同语言进行传输时,类型为字符串,不同的语言各自也都对应有解析方法,需要解析完成后才能读取

    1Javascript 解析方法

    eavl()、JSON对象  JSON.parse()、JSON.stringify();

    JSON兼容处理json2.js

    2PHP解析方法

    json_encode()、json_decode()

    总结:JSON体积小、解析方便且高效,在实际开发成为首选。

    1.4   兼容性

    IE5、IE6中使用 ActiveObject("Microsoft.XMLHTTP")

    如下图

    关于IE的兼容方面,了解即可。

    1.5   jQuery中的Ajax

    jQuery为我们提供了更强大的Ajax封装

    $.ajax({}) 可配置方式发起Ajax请求

    $.get() 以GET方式发起Ajax请求

    $.post() 以POST方式发起Ajax请求

    $('form').serialize() 序列化表单(即格式化key=val&key=val)

    url 接口地址

    type 请求方式

    timeout 请求超时

    dataType 服务器返回格式

    data 发送请求数据

    beforeSend: function () {} 请求发起前调用

    success 成功响应后调用

    error 错误响应时调用

    complete 响应完成时调用(包括成功和失败)

    jQuery Ajax介绍

    http://www.css88.com/jqapi-1.9/

    第2章JSONP

    2.1   JSONP

    JSON with Padding

    1、原理剖析

    其本质是利用了<script src=""></script>标签具有可跨域的特性,由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。

    只能以GET方式请求

    2.2   jQuery中的JSONP

    jQuery 的$.ajax() 方法当中集成了JSONP的实现,可以非常方便的实现跨域数据的访问。

    dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问

    jsonp 可以指定服务端接收的参数的“key”值,默认为callback

    jsonpCallback 可以指定相应的回调函数,默认自动生成

    http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/

  • 相关阅读:
    selenium之css选择器高级用法
    常系数线性齐次递推新理解
    关于莫队本质的理解
    2021.5.8总结
    决策单调性优化dp
    字符串 复习
    5.1总结
    树分块 学习笔记
    莫反 复习
    P4570 [BJWC2011]元素
  • 原文地址:https://www.cnblogs.com/famensaodiseng/p/7189748.html
Copyright © 2011-2022 走看看