Sharepoint 2010: create new list items using pure javascript

On Sharepoint 2010, every site has a Representational State Transfer (REST) interface. The SharePoint 2010 Representational State Transfer (REST) interface is a WCF Data Service that allows you to use construct HTTP requests to query SharePoint list data. The URL of this WCF service will be in the form:

The data and operations are represented and supported using the OData protocol. The Open Data Protocol (OData) enables the creation of HTTP-based data services, which allow resources identified using Uniform Resource Identifiers (URIs) and defined in an abstract data model, to be published and edited by Web clients using simple HTTP messages.
As described above in the OData documentation, a Service Document is exposed that lists all the top-level feeds so clients can discover them and find out the addresses of each of them. The service document is typically available at the Service Root URI and may be formatted in Atom or JSON as described in [OData: Atom] and [OData: JSON].
Mapping this concept to the Sharepoint 2010 architecture, the service document URI is our ListData.svc address and the top level feed will be an Atom feed with all the Sharepoint Lists existing at the site. The feed for a specific list will have the address:


Having explained this, one can go through the steps of creating a simple javascript to use AJAX and JSON to create a new list item. For this we will use:

• datajs: a new cross-browser JavaScript library that enables data-centric web applications by leveraging modern protocols such as JSON and OData and HTML5-enabled browser features. It's designed to be small, fast and easy to use.
• json: became a built-in feature of JavaScript when the ECMAScript Programming
  Language Standard - Fifth Edition was adopted by the ECMA General Assembly
  in December 2009. However, if you have run-time problems, you can try to include this.
• jQuery: fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

First, create a simple HTML file and include the required JS libraries:

< script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js" type="text/javascript">
< /script>
< script src="datajs-1.0.2.min.js" type="text/javascript">
< /script> 
< script src="json2.js" type="text/javascript">
< /script> 

Next,  create the fucntion that will add the new item to the target list:

function addNewItem() {     
 // create a typeless JS object and fill it with values for the new list item  
 var newItem = {    attribute1: $("#formField1").val(),
         attribute2: $("#formField2").val(),
         attribute3: $("#formField3").val()};  

// create the JS object to pass as parameter to the OData request 
var requestOptions = {    requestUri: "[your list URL]", method: "POST", data: newItem };  

// call OData.request to add item with HTTP POST operation  
 OData.request(requestOptions, OnSuccess, OnError);

 }

Finally, create callback function the handle success and error outcomes:

function OnSuccess(data, request) {
   alert("Success!");
}

function OnError(error) {
 alert(JSON.stringify(error));
}

To fit this all together, use an HTML form to input the required fields and a button that calls the add new item function "addNewItem()".

Happy programming!